Fix: <select size> list box should not select first option when value does not match#36184
Open
Zelys-DFKH wants to merge 1 commit intofacebook:mainfrom
Open
Fix: <select size> list box should not select first option when value does not match#36184Zelys-DFKH wants to merge 1 commit intofacebook:mainfrom
Zelys-DFKH wants to merge 1 commit intofacebook:mainfrom
Conversation
…value does not match When a <select> has size > 1 (a list box), no option should be selected if the controlled value prop does not match any option value. The browser leaves list boxes with no selection in this case; React was incorrectly falling back to selecting the first non-disabled option on every update. The fix is one line: the first-option fallback in updateOptions now only runs when node.size <= 1 (a dropdown), leaving list boxes unselected as the HTML spec requires. Fixes facebook#24469
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
When
size > 1, a<select>renders as a list box. List boxes don't require a selection, so the browser leaves nothing highlighted when no option carries theselectedattribute. Dropdowns (size=1or nosize) always show something, so the browser picks the first option automatically.updateOptionsinReactDOMSelect.jshas a fallback that selects the first non-disabled option when the controlledvaluedoesn't match anything. That's fine for dropdowns, where it matches what the browser does anyway. For list boxes it's wrong: on every re-render,updateOptionsfires against the live options, finds no match, and silently marks the first option as selected.The fix skips the fallback when
node.size > 1.Fixes #24469
How did you test this change?
Added two tests to
ReactDOMSelect-test.js:size="2"and a non-matchingvalueprop stays deselected after re-render. This was the broken case.size="2"and a matchingvaluestill selects the right option.All existing tests in
ReactDOMSelect-test.jsandReactDOMServerIntegrationSelect-test.jspass.