[FormsyText] Warning: Input elements must be either controlled or uncontrolled

[dmhood]

Currently the defaultValue prop of the underlying TexField component is set using the "value" prop (https://github.com/mbrookes/formsy-material-ui/blob/master/src/FormsyText.jsx#L34). Because we pass all these props down to textfield (https://github.com/mbrookes/formsy-material-ui/blob/master/src/FormsyText.jsx#L32) this unfortunately makes the field un-editable. Suggest just removing https://github.com/mbrookes/formsy-material-ui/blob/master/src/FormsyText.jsx#L34 altogether.

[mosanger]

This also produces the following warnings in Chrome, when I try to set the value property, instead of defaultValue:

Warning: Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://fb.me/react-controlled-components

Warning: TextField is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Setting value instead of defaultValue at least makes the field usable, but doesn't set its value initially, which means its value is always empty on mount.

using React 15.0.1 and Material UI 0.15.0-beta1

[keremciu]

yep, I delete only one line on formsytext

defaultValue: this.props.value

and it works normally now, I can use defaultValue property

[quangdng]

@keremciu Can you make a pull request for that? It would be great.

[reebalazs]

Hi there,

I've created #87 which is a related issue, closing now because the two issues interrelate.

In my original problem I passed in 'value' which I wanted to get passed down as defaultValue to TextField. This makes the field uneditable. I attempted to fix this in PR #86, which makes the field editable again. - But it also breaks the possibility to pass in a value directly. In my use, I don't do that, but reading this issue, I realize it can be a legitimate need.

1. solution would be to change the api and require to pass in defaultValue if you really want to pass in defaultValue, and value if you want value. This would be, imo, a breaking change if previously the code passed in value.
2. possibility is to apply my fix and then you loose the ability to pass in value directly, but you can continue to pass in value which would result in passing the defaultValue to TextField really

However if everything is left as it is currently, it is not possible to set a defaultValue, and an intention to do so will actually set value instead of defaultValue, resulting in an uneditable form field. So a change is needed in any case, because passing in an initial value (transformed into defaultValue) is a legitime use case. It broke my codebase, for example, which was the main reason for me to figure out a solution.

I beleive this line in the README:
"Note: for FormsyText you must use value instead of defaultValue to set a default value."
summarizes the problem really. Now I am inclined to solution 1., as it seems to be more universal, even on the price of breaking changes. @mbrookes, what do you think? In both cases, the fix would be simple, but I urge some action, as currently FormsyText is broken.

[reebalazs]

Looking deeper at this, the case seems more and more complex. I am not sure if some recent change in formsy, or the react update has caused the regression that does not allow the value to be changed any more. The only way I can make this work currently, if I start managing the value myself. I have a terribly messed up version that works for my code, but not elegant and workaround-ish. I'll consider another PR once I am able to stabilize things.

[mbrookes]

@reebalazs - the reason the default value has to be set with value is that formsy-react expects the default value on that prop.

Things may have been broken by the removal in 0.4.0 of a chunk of code to improve performance, (effectively a copy #72 applied manually).

[mbrookes]

Actually, it's likely this was always an issue, but React didn't complain before 15.0.

Could you try the current master?

[dmhood]

Before https://github.com/mbrookes/formsy-material-ui/pull/72/files the element was manually applying the newly input values to the underlying text element...now that it is removed you cannot use value/defaultValue at all without rending the textfield unchangeable.

The warning about controlled/uncontrolled input elements is a separate (related) issue.

Shouldn't cf19f38 be rolled back until a working solution can be found?

[mbrookes]

@dmhood You shouldn't be using defaultValue - please see the README.

[dmhood]

@mbrookes What I mean is using the value prop to set the default value (https://github.com/mbrookes/formsy-material-ui/blob/master/src/FormsyText.jsx#L34). It "locks" the value to whatever you pass in. There is no way to set the value but still get new user input.

[mbrookes]

@dmhood - my bad. Missed the most important file from the commit! Try now.

[dmhood]

@mbrookes works great w/ the recent commit, thanks!

edit: Leaving it open in case there is any more discussion but feel free to close.

[KatSick]

Gentlemen's, is there any workaround to use controlled inputs ?

[mbrookes]

@dmhood - 0.4.1 released.

@ochervak - not at the moment - controlled use was causing performance problems, but we'll have to revisit at some point, as uncontrolled use is possibly being removed from MUI in the future. Feel free to submit a PR if you can figure out a solution! 👍

[KatSick]

thanks

[dmhood]

thanks!

[mbrookes]

I've updated FormsyText on master, so it now supports defaultValue, but also kept backwards compatibility with using value for this purpose. Please check it out and let me know if it's working as expected for you.

[reebalazs]

It took me a while but I tested the last fix out. The fix was definitely going to the right direction, very similar to my previous solution, but better. However it was still not perfect. Here is PR #100 which fixes the remaining problems. (Wohoo, PR 100!)

1. The correct order of the value + defaultValue selection should be just the opposite of the current one:

   this.props.value || this.props.defaultValue || ''

   This allows the use of both a defaultValue and a value (controlled case), and allows the value to take precedent if it's specified. After this, both value and defaultValue props do perfectly what they are intended to.

2. Similar to componentWillMount, there is also a need for a componentWillReceiveProps. This covers the case when the form gets reloaded with new values, and allows the defaultValue-s change on the fly, taking care of the pristine values working correctly in this case.

Some other notes are on the PR.

Please test it out and let me know what you think, I am testing this for a while in a project, and it works well.