From 62cdb87b02e36605623308856f5c5c642c61ea52 Mon Sep 17 00:00:00 2001
From: Lucas Weng <lucasheweng@gmail.com>
Date: Thu, 22 May 2025 06:42:00 +0800
Subject: [PATCH 1/5] fix: prevent form submission when required Select has
 more than 300 options and no selection

---
 .../@react-aria/select/src/HiddenSelect.tsx   | 10 +++++--
 .../stories/Select.stories.tsx                | 28 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index b0d61ddc2aa..76b0b884c8a 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -141,13 +141,19 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
       </div>
     );
   } else if (name) {
+    let data = selectData.get(state) || {};
+    // 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
-        type="hidden"
+        type="text"
         autoComplete={selectProps.autoComplete}
         name={name}
         disabled={isDisabled}
-        value={state.selectedKey ?? ''} />
+        value={state.selectedKey ?? ''}
+        onChange={() => {/** Ignore react warning. */}}
+        required={data.isRequired}
+        hidden />
     );
   }
 
diff --git a/packages/react-aria-components/stories/Select.stories.tsx b/packages/react-aria-components/stories/Select.stories.tsx
index 51f9473833a..b2018191e80 100644
--- a/packages/react-aria-components/stories/Select.stories.tsx
+++ b/packages/react-aria-components/stories/Select.stories.tsx
@@ -64,7 +64,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 +178,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 = () => (
+  <form>
+    <Select 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>
+);

From 8f2dc84028f1eb9be2467392e68b0ac5ab9b8a75 Mon Sep 17 00:00:00 2001
From: Lucas Weng <lucasheweng@gmail.com>
Date: Thu, 29 May 2025 08:28:04 +0800
Subject: [PATCH 2/5] fix: only block form submission if the validation
 behavior is native

---
 .../@react-aria/select/src/HiddenSelect.tsx   | 36 ++++++++++++-------
 .../stories/Select.stories.tsx                | 12 +++++--
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index 76b0b884c8a..bbff8b81184 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/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';
@@ -142,19 +142,29 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
     );
   } else if (name) {
     let data = selectData.get(state) || {};
-    // 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.
+    let {validationBehavior} = data;
+
+    let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+      type: 'hidden',
+      autoComplete: selectProps.autoComplete,
+      name,
+      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.
+      inputProps.type = 'text';
+      inputProps.hidden = true;
+      inputProps.required = selectProps.required;
+      // Ignore react warning.
+      inputProps.onChange = () => {};
+    }
+
     return (
-      <input
-        type="text"
-        autoComplete={selectProps.autoComplete}
-        name={name}
-        disabled={isDisabled}
-        value={state.selectedKey ?? ''}
-        onChange={() => {/** Ignore react warning. */}}
-        required={data.isRequired}
-        hidden />
-    );
+      <input {...inputProps} />
+    )
   }
 
   return null;
diff --git a/packages/react-aria-components/stories/Select.stories.tsx b/packages/react-aria-components/stories/Select.stories.tsx
index b2018191e80..d2f19fa601d 100644
--- a/packages/react-aria-components/stories/Select.stories.tsx
+++ b/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 = () => (
@@ -183,9 +189,9 @@ AsyncVirtualizedCollectionRenderSelect.story = {
 // 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 = () => (
+export const RequiredSelectWithManyItems = (props) => (
   <form>
-    <Select name="select" isRequired>
+    <Select {...props} name="select" isRequired>
       <Label style={{display: 'block'}}>Required Select with many items</Label>
       <Button>
         <SelectValue />

From c21313ab93caa74c8dfbde8a0d177d34ae13e589 Mon Sep 17 00:00:00 2001
From: Lucas Weng <lucasheweng@gmail.com>
Date: Thu, 29 May 2025 08:44:32 +0800
Subject: [PATCH 3/5] fix: lint errors

---
 packages/@react-aria/select/src/HiddenSelect.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index bbff8b81184..07d4d8466e7 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -152,7 +152,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
       value: state.selectedKey ?? ''
     };
 
-    if (validationBehavior === "native") {
+    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.
       inputProps.type = 'text';
@@ -164,7 +164,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
 
     return (
       <input {...inputProps} />
-    )
+    );
   }
 
   return null;

From 89056dd320817917f92ad382e87cab3c4ffd035e Mon Sep 17 00:00:00 2001
From: Lucas Weng <lucasheweng@gmail.com>
Date: Thu, 29 May 2025 19:48:24 +0800
Subject: [PATCH 4/5] fix: prevent invalid form control error and native error
 popup for visually hidden required input

---
 .../@react-aria/select/src/HiddenSelect.tsx   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index 07d4d8466e7..b4d91284c0e 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -153,13 +153,21 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
     };
 
     if (validationBehavior === 'native') {
-      // Use a hidden <input type="text"> rather than <input type="hidden">
+      // 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.
-      inputProps.type = 'text';
-      inputProps.hidden = true;
-      inputProps.required = selectProps.required;
-      // Ignore react warning.
-      inputProps.onChange = () => {};
+      return (
+        <input
+          {...containerProps}
+          {...inputProps}
+          type="text"
+          required={selectProps.required}
+          onChange={() => {/** Ignore react warning. */}}
+          onInvalid={(e) => {
+            // Prevent native browser error popup from appearing.
+            e.preventDefault();
+            triggerRef.current?.focus();
+          }} />
+      );
     }
 
     return (

From ddb1e00d13e4896c758311208b7fa1f6353d91d7 Mon Sep 17 00:00:00 2001
From: Lucas Weng <lucasheweng@gmail.com>
Date: Mon, 2 Jun 2025 08:09:56 +0800
Subject: [PATCH 5/5] fix: prevent visually hidden text input from affecting
 keyboard navigation

---
 packages/@react-aria/select/src/HiddenSelect.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index b4d91284c0e..68548612db7 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -160,6 +160,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null
           {...containerProps}
           {...inputProps}
           type="text"
+          tabIndex={-1}
           required={selectProps.required}
           onChange={() => {/** Ignore react warning. */}}
           onInvalid={(e) => {