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

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

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement, RefObject} from '@react-types/shared';
-import React, {JSX, ReactNode, useRef} from 'react';
+import React, {InputHTMLAttributes, JSX, ReactNode, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
 import {useFormReset} from '@react-aria/utils';
@@ -141,13 +141,38 @@ 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,
+      disabled: isDisabled,
+      value: state.selectedKey ?? ''
+    };
+
+    if (validationBehavior === 'native') {
+      // Use a visually 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
+          {...containerProps}
+          {...inputProps}
+          type="text"
+          tabIndex={-1}
+          required={selectProps.required}
+          onChange={() => {/** Ignore react warning. */}}
+          onInvalid={(e) => {
+            // Prevent native browser error popup from appearing.
+            e.preventDefault();
+            triggerRef.current?.focus();
+          }} />
+      );
+    }
+
     return (
-      <input
-        type="hidden"
-        autoComplete={selectProps.autoComplete}
-        name={name}
-        disabled={isDisabled}
-        value={state.selectedKey ?? ''} />
+      <input {...inputProps} />
     );
   }
 

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'
+  title: 'React Aria Components',
+  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);
 
 export const SelectManyItems = () => (
   <Select>
@@ -174,3 +184,25 @@ AsyncVirtualizedCollectionRenderSelect.story = {
     delay: 50
   }
 };
+
+// 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>
+);