fix: prevent form submission when required Select has more than 300 options and no selection

[lucasweng]

Closes #8034

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

• Added a "Required Select With Many Items" story to RAC storybook to manually verify the behavior, since required select validation cannot currently be tested in the jsdom environment (see: http://github.com/jsdom/jsdom/issues/2898).

🧢 Your Project:

[snowystinger]

This appears to be working as intended. I tried looking into a unit test for it working around the issue in the comment, but I don't think it's worth the effort in jsdom. Instead, we can write a play function to do it in storybook in the future

[devongovett]

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.

[lucasweng]

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.

[snowystinger]

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.

[snowystinger]

Looks good to me, thanks for being so responsive

[snowystinger]

Looks good, checked autofill as well, looks like it never worked with over 300 items, so that's fine for now.

Verified with VO as well.

[devongovett]

I think useFormValidation should handle this. The trigger shouldn't necessarily be focused on invalid - the first invalid field in the form should be focused, which might not be the select.

We may need to attach the selectRef to the input for this to work.