fix: prevent form submission when required Select has more than 300 options and no selection #8280
Conversation
…ptions and no selection
| return ( | ||
| <input | ||
| type="hidden" | ||
| type="text" |
There was a problem hiding this comment.
This should only be the case if validationBehavior="native". If validationBehavior="aria", then form submission should not be blocked. We should continue to use type="hidden" in that case.
There was a problem hiding this comment.
8f2dc84 Thanks! I added a validationBehavior control to the "Required Select With Many Items" story and tested that only validationBehavior="native" blocks form submission now.
Edited: 89056dd fixes the error mentioned in #8280 (review) by changing the text input to be visually hidden.
There was a problem hiding this comment.
I'm getting an error
An invalid form control with name='select' is not focusable. <input type="text" name="select" hidden required value>
I wonder if we could get around this by making the input VisuallyHidden instead of using hidden. I tried it out, the console error goes away, but we get the native error handling/display. So we'd probably need to forward those to the Select somehow.
…sually hidden required input
| return ( | ||
| <input | ||
| {...containerProps} | ||
| {...inputProps} |
There was a problem hiding this comment.
Noticed in the story that keyboard tab navigation is broken, we'll want to put a tabIndex={-1} on this element I think so it can't be tabbed to
Closes #8034
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: