Controls: Fix select / multiselect when value contains multiple spaces #22334
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.
Closes #17051.
Analysis
Select and multiselect controls won’t work when selecting an option with multiple spaces, causing the select to reset and the URL reference to be removed or added as "undefined", in the case of multiselect. This is due to the options not receiving the value prop. According to the HTML specs:
So HTML is involved, which is notoriously unreliable about multiple white spaces.
What I did
I've added the value to both the select and multiselect components.
How to test
yarn task --task sandbox --start-from auto --template react-vite/default-ts
./?path=/story/addons-controls-basics--undefined
.Or just run the E2E tests I've added.
Checklist
MIGRATION.MD
Maintainers
make sure to add the
ci:merged
orci:daily
GH label to it.["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]