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

Projects
None yet
5 participants
@piscolomo
Copy link
Contributor

commented Jan 16, 2016

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,

This comment has been minimized.

Copy link
@sebmarkbage

sebmarkbage Jan 18, 2016

Member

Ideally this should be DEV only.

@piscolomo

This comment has been minimized.

Copy link
Contributor Author

commented Jan 19, 2016

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

@facebook-github-bot

This comment has been minimized.

Copy link

commented Jan 19, 2016

@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;

This comment has been minimized.

Copy link
@jimfb

jimfb Jan 19, 2016

Contributor

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

@piscolomo

This comment has been minimized.

Copy link
Contributor Author

commented Jan 19, 2016

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

@facebook-github-bot

This comment has been minimized.

Copy link

commented Jan 19, 2016

@TheBlasfem updated the pull request.

@syranide

This comment has been minimized.

Copy link
Contributor

commented Jan 19, 2016

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;

This comment has been minimized.

Copy link
@jimfb

jimfb Jan 19, 2016

Contributor

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

This comment has been minimized.

Copy link
@piscolomo

piscolomo Jan 19, 2016

Author Contributor

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

@facebook-github-bot

This comment has been minimized.

Copy link

commented Jan 19, 2016

@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;

This comment has been minimized.

Copy link
@syranide

syranide Jan 19, 2016

Contributor

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.

This comment has been minimized.

Copy link
@piscolomo

piscolomo Jan 20, 2016

Author Contributor

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

@facebook-github-bot

This comment has been minimized.

Copy link

commented Jan 20, 2016

@TheBlasfem updated the pull request.

1 similar comment
@facebook-github-bot

This comment has been minimized.

Copy link

commented Jan 20, 2016

@TheBlasfem updated the pull request.

@piscolomo

This comment has been minimized.

Copy link
Contributor Author

commented Jan 20, 2016

@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). ' +

This comment has been minimized.

Copy link
@jimfb

jimfb Feb 3, 2016

Contributor

Missing space between "controlled(or"

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

This comment has been minimized.

Copy link
@jimfb

jimfb Feb 3, 2016

Contributor

Same, missing space

) {
warning(
false,
'%s is changing a controlled input to be uncontrolled. ' +

This comment has been minimized.

Copy link
@jimfb

jimfb Feb 4, 2016

Contributor

Can we also specify the type of the input (checkbox/radio/etc). We can just print the props.type to do that.

@jimfb

This comment has been minimized.

Copy link
Contributor

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

warn when an input switches between controlled and uncontrolled
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

@piscolomo piscolomo force-pushed the piscolomo:master branch from 07037fd to b38b39a Feb 4, 2016

@facebook-github-bot

This comment has been minimized.

Copy link

commented Feb 4, 2016

@TheBlasfem updated the pull request.

@piscolomo

This comment has been minimized.

Copy link
Contributor Author

commented Feb 4, 2016

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

Merge pull request #5864 from TheBlasfem/master
Warn when an input switches between controlled and uncontrolled

@jimfb jimfb merged commit d684b15 into facebook:master Feb 13, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@jimfb

This comment has been minimized.

Copy link
Contributor

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

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

budiantotan added a commit to budiantotan/soya-form that referenced this pull request Nov 29, 2017

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

sayuti-daniel added a commit to traveloka/soya-form that referenced this pull request Nov 29, 2017

Fix react 15 console warning: 'value' prop on forms should not be null (
#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

@renovate renovate bot referenced this pull request Feb 2, 2018

Open

Update dependency react to v0.14.9 #29

0 of 1 task complete

fawwaz added a commit to fawwaz/soya-form that referenced this pull request May 31, 2018

Fix react 15 console warning: 'value' prop on forms should not be null (
traveloka#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
You can’t perform that action at this time.