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

Changed the error message displayed when a select element has props.multiple set to true and value set to null #11141

Merged

Conversation

nealwright
Copy link
Contributor

@nealwright nealwright commented Oct 6, 2017

Addresses issue #9038

I changed the error message shown when a select element with props.multiple set to true has a value of null to recommend an empty array instead of an empty string. Given that "the empty string" is a common term but "the empty array" is less so, I also changed the null input value error message shown for textarea and input to use "an empty string" instead of "the empty string" and changed tests to match.

'for uncontrolled components.%s',
type,
type === 'select' ? 'array' : 'string',
Copy link
Collaborator

Choose a reason for hiding this comment

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

This doesn't seem to check for .multiple.

@gaearon
Copy link
Collaborator

gaearon commented Oct 7, 2017

Can you please rebase the branch of master instead of merging? This way unrelated commits won't be in the history.

@nealwright nealwright force-pushed the select-null-input-value-error-message branch from 9d8f6d9 to 53e7f7e Compare October 7, 2017 21:43
@nealwright
Copy link
Contributor Author

@gaearon Okay I've squashed my commits and rebased so you should now see only my changes. I also added the check for the property multiple and added a test for that case.

@nealwright nealwright force-pushed the select-null-input-value-error-message branch 2 times, most recently from 20d12a7 to 28a6063 Compare October 12, 2017 16:36
Copy link
Contributor

@nhunzaker nhunzaker left a comment

Choose a reason for hiding this comment

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

This looks good to me.

@nealwright nealwright force-pushed the select-null-input-value-error-message branch from 28a6063 to 10b8636 Compare October 27, 2017 10:01
@nealwright
Copy link
Contributor Author

I just rebased with master to fix the merge conflicts that arose. @gaearon Is there anything else I need to do for this pull request?


expectDev(console.error.calls.argsFor(0)[0]).toContain(
'`value` prop on `select` should not be null. ' +
'Consider using an empty array when multiple is ' +
Copy link
Collaborator

Choose a reason for hiding this comment

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

Nit: value and select are backticked but multiple isn't. Let's backtick it too.

expectDev(console.error.calls.argsFor(0)[0]).toContain(
'`value` prop on `select` should not be null. ' +
'Consider using an empty array when multiple is ' +
'set to true to clear the component or `undefined` ' +
Copy link
Collaborator

Choose a reason for hiding this comment

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

Same for true.

@nealwright nealwright force-pushed the select-null-input-value-error-message branch from 10b8636 to 5e90c3e Compare October 27, 2017 23:35
@nealwright nealwright force-pushed the select-null-input-value-error-message branch from 5e90c3e to 908ad12 Compare October 27, 2017 23:45
@nealwright
Copy link
Contributor Author

@gaearon I've added the requested changes. Let me know if you need anything else, thanks!

if (props != null && props.value === null && !didWarnValueNull) {

var isMultipleSelect = type === 'select' && props.multiple === true;
var errorType = isMultipleSelect ? 'multiple' : 'default';
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think this is important. I'd prefer a single boolean to deduplicate (even though deduplicating one will influence the other). They're rare enough.

Then we would move the isMultipleSelect check inside the condition. So it's only checked in error case.

@gaearon
Copy link
Collaborator

gaearon commented Oct 31, 2017

I made a few changes:

  • Removed deduplication based on type. Not worth the complexity. Had to add jest.resetModules() to isolate tests better.
  • Removed the dynamic warnings in favor of more static ones. That's a bit easier to understand IMO.
  • Used props.multiple rather than props.multiple === true since the actual codepath in the DOM renderer uses loose comparison.

@gaearon gaearon merged commit 4a43cf6 into facebook:master Oct 31, 2017
@nealwright
Copy link
Contributor Author

@gaearon Thanks, sorry I wasn't able to get to this faster!

Ethan-Arrowood pushed a commit to Ethan-Arrowood/react that referenced this pull request Dec 8, 2017
…ultiple set to true and value set to null (facebook#11141)

* Corrects error message for select with props.multiple set to true and a null value.

* Don't bother deduplicating based on type

* Make the code a bit simpler (and more verbose)
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.

4 participants