Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warn when an input switches between controlled and uncontrolled #5864

Merged
merged 1 commit into from
Feb 13, 2016

Conversation

piscolomo
Copy link
Contributor

Attempts to fix #5821
After using for a time React, I've decided to look into the source and start contributing, i hope this results helpful, I'll be pending for future improvements if are needed, thanks!

@@ -141,6 +143,7 @@ var ReactDOMInput = {
inst._wrapperState = {
initialChecked: props.defaultChecked || false,
initialValue: defaultValue != null ? defaultValue : null,
controlled: props.value !== undefined,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally this should be DEV only.

@piscolomo
Copy link
Contributor Author

@sebmarkbage I've added the line specified to DEV only

@facebook-github-bot
Copy link

@TheBlasfem updated the pull request.

@@ -144,6 +146,10 @@ var ReactDOMInput = {
listeners: null,
onChange: _handleChange.bind(inst),
};

if (__DEV__) {
inst._wrapperState.controlled = props.value !== undefined;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If type="checkbox" then the controlled component would use the checked prop instead of the value prop.

@piscolomo
Copy link
Contributor Author

thanks @jimfb I've sent a commit, i'm taking into account now the checkbox inputs

@facebook-github-bot
Copy link

@TheBlasfem updated the pull request.

@syranide
Copy link
Contributor

I'm not sure where we stand technically (do we still track owner?), but if possible the errors should include the responsible component (or source location) and be tracked individually per component? These generic warnings are incredibly hard to diagnose.

@@ -144,6 +146,11 @@ var ReactDOMInput = {
listeners: null,
onChange: _handleChange.bind(inst),
};

if (__DEV__) {
var controlledValue = props.type === 'checkbox' ? props.checked : props.value;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

checked is also valid for radio. We probably shouldn't be branching based on props.type. I think we can just do controlled = props.checked !== undefined || props.value != undefined

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it makes sense, I've updated the PR following your suggestion @jimfb

@facebook-github-bot
Copy link

@TheBlasfem updated the pull request.


var initialValue = inst._wrapperState.initialChecked || inst._wrapperState.initialValue;
var defaultValue = props.defaultChecked || props.defaultValue;
var controlledValue = props.checked || props.value;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can't be right I think? false || undefined => undefined and then later controlledValue !== undefined. Why not compute controlled instead of value? The value isn't used anywhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i didn't notice that, thanks @syranide i've sent a fix

@facebook-github-bot
Copy link

@TheBlasfem updated the pull request.

1 similar comment
@facebook-github-bot
Copy link

@TheBlasfem updated the pull request.

@piscolomo
Copy link
Contributor Author

@syranide i've sent a commit displaying the owner's name in the warning

warning(
false,
'%s is changing a uncontrolled input to be controlled. ' +
'Input elements should not switch from uncontrolled to controlled(or viceversa). ' +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing space between "controlled(or"

@jimfb
Copy link
Contributor

jimfb commented Feb 4, 2016

A couple of nitpicks, and then I think this is ready to merge.

Also, please squash the six commits into a single commit (eg. git rebase -i and then git push -f).

@jimfb jimfb added this to the 0.15 milestone Feb 4, 2016
@jimfb jimfb self-assigned this Feb 4, 2016
added controlled key to DEV

warn for checkbox inputs

warn for radio inputs

compute controlled instead of value

displaying owner name in warning

displaying input type in warnings
@facebook-github-bot
Copy link

@TheBlasfem updated the pull request.

@piscolomo
Copy link
Contributor Author

thanks for the comments @jimfb I've already applied the changes in a single commit squashed

jimfb added a commit that referenced this pull request Feb 13, 2016
Warn when an input switches between controlled and uncontrolled
@jimfb jimfb merged commit d684b15 into facebook:master Feb 13, 2016
@jimfb
Copy link
Contributor

jimfb commented Feb 13, 2016

Thanks @TheBlasfem!

yesmeck referenced this pull request in ant-design/ant-design Nov 1, 2016
budiantotan added a commit to budiantotan/soya-form that referenced this pull request Nov 25, 2017
the value in redux store shouldn't be affected.
caused by small breaking change in react 15: facebook/react#5864
budiantotan added a commit to budiantotan/soya-form that referenced this pull request Nov 29, 2017
the value in redux store shouldn't be affected.
caused by small breaking change in react 15: facebook/react#5864
fawwaz pushed a commit to fawwaz/soya-form that referenced this pull request May 31, 2018
…l (#15)

* Fix react 15 console warning: 'value' prop on forms should not be null

the value in redux store shouldn't be affected.
caused by small breaking change in react 15: facebook/react#5864

* disable eslint complexity
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Warn when an input switches between controlled and uncontrolled
5 participants