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

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

* fix: only block form submission if the validation behavior is native

* fix: lint errors

* fix: prevent invalid form control error and native error popup for visually hidden required input

* fix: prevent visually hidden text input from affecting keyboard navigation

* refactor: use display: none instead of visually hidden to hide the input

* fix conflict where select would steal focus on invalid from previous invalid components

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: lucasweng

packages/@react-aria/select/src/HiddenSelect.tsx

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement, RefObject} from '@react-types/shared';
-import React, {JSX, ReactNode, useCallback, useRef} from 'react';
+import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
 import {useFormReset} from '@react-aria/utils';
@@ -51,7 +51,7 @@ export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
 
 export interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
   /** A ref to the hidden `<select>` element. */
-  selectRef?: RefObject<HTMLSelectElement | null>
+  selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>
 }
 
 export interface HiddenSelectAria {
@@ -124,7 +124,8 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
 export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null {
   let {state, triggerRef, label, name, form, isDisabled} = props;
   let selectRef = useRef(null);
-  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);
+  let inputRef = useRef(null);
+  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef}, state, triggerRef);
 
   // If used in a <form>, use a hidden input so the value can be submitted to a server.
   // If the collection isn't too big, use a hidden <select> element for this so that browser
@@ -153,14 +154,34 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
       </div>
     );
   } else if (name) {
+    let data = selectData.get(state) || {};
+    let {validationBehavior} = data;
+
+    let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+      type: 'hidden',
+      autoComplete: selectProps.autoComplete,
+      name,
+      form,
+      disabled: isDisabled,
+      value: state.selectedKey ?? ''
+    };
+
+    if (validationBehavior === 'native') {
+      // Use a hidden <input type="text"> rather than <input type="hidden">
+      // so that an empty value blocks HTML form submission when the field is required.
+      return (
+        <input
+          {...inputProps}
+          ref={inputRef}
+          style={{display: 'none'}}
+          type="text"
+          required={selectProps.required}
+          onChange={() => {/** Ignore react warning. */}} />
+      );
+    }
+
     return (
-      <input
-        type="hidden"
-        autoComplete={selectProps.autoComplete}
-        name={name}
-        form={form}
-        disabled={isDisabled}
-        value={state.selectedKey ?? ''} />
+      <input {...inputProps} ref={inputRef} />
     );
   }
 

packages/react-aria-components/stories/Select.stories.tsx

@@ -18,7 +18,13 @@ import {UNSTABLE_ListBoxLoadingSentinel} from '../src/ListBox';
 import {useAsyncList} from 'react-stately';
 
 export default {
-  title: 'React Aria Components/Select'
+  title: 'React Aria Components/Select',
+  argTypes: {
+    validationBehavior: {
+      control: 'select',
+      options: ['native', 'aria']
+    }
+  }
 };
 
 export const SelectExample = () => (
@@ -64,7 +70,11 @@ export const SelectRenderProps = () => (
   </Select>
 );
 
-let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
+let makeItems = (length: number) => Array.from({length}, (_, i) => ({
+  id: i,
+  name: `Item ${i}`
+}));
+let manyItems = makeItems(100);
 
 const usStateOptions = [
   {id: 'AL', name: 'Alabama'},
@@ -274,3 +284,25 @@ export const SelectSubmitExample = () => (
     <Button type="reset">Reset</Button>
   </Form>
 );
+
+// Test case for https://github.com/adobe/react-spectrum/issues/8034
+// Required select validation cannot currently be tested in the jsdom environment.
+// In jsdom, forms are submitted even when required fields are empty.
+// See: https://github.com/jsdom/jsdom/issues/2898
+export const RequiredSelectWithManyItems = (props) => (
+  <form>
+    <Select {...props} name="select" isRequired>
+      <Label style={{display: 'block'}}>Required Select with many items</Label>
+      <Button>
+        <SelectValue />
+        <span aria-hidden="true" style={{paddingLeft: 5}}>▼</span>
+      </Button>
+      <Popover>
+        <ListBox items={makeItems(301)} className={styles.menu}>
+          {item => <MyListBoxItem>{item.name}</MyListBoxItem>}
+        </ListBox>
+      </Popover>
+    </Select>
+    <Button type="submit">Submit</Button>
+  </form>
+);