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] 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>
+);