fix(select): handling select with both multiple and required #2231
+218
−51
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.
This PR should fix the issue #1872, where a select with both multiple and required props is locked in a form when more than 1 option is selected.
I created a story for this specific issue, and it should support both controlled and uncontrolled values.
formData.getAll('name')Things I'm not sure about :
rootContext.onValueChange()removed (side-effects?)Things I need help with:
The
<SelectValue>text flickers when opening or closing the select, because the Map temporarily loses all its keys before they’re re-added. Its size goes down to0when the content is closing (sinceItemTextemits an event on unmount), and then all the options are added again.The issue is that during the frame between removal and addition, the placeholder briefly appears. However, this might be a separate issue, since it can also be observed in the Select component on the Reka UI docs (although it’s very short — blink and you’ll miss it!).
Fix #1872