fix: Avoid need to document Select "gotcha" (#8579)

devongovett · web-flow · commit a98c2a5ef8e0 · 2025-07-18T20:44:16.000Z
diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -74,7 +74,14 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
   let data = selectData.get(state) || {};
   let {autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled} = props;
   let {validationBehavior, isRequired} = data;
-  let {visuallyHiddenProps} = useVisuallyHidden();
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      // Prevent page scrolling.
+      position: 'fixed',
+      top: 0,
+      left: 0
+    }
+  });
 
   useFormReset(props.selectRef, state.defaultSelectedKey, state.setSelectedKey);
   useFormValidation({
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -340,7 +340,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
       aria-describedby={spinnerId}
       placeholder={placeholder}
       style={UNSAFE_style}
-      className={UNSAFE_className + style({...field(), position: 'relative'}, getAllowedOverrides())({
+      className={UNSAFE_className + style(field(), getAllowedOverrides())({
         isInForm: !!formContext,
         labelPosition,
         size
diff --git a/packages/react-aria-components/docs/Select.mdx b/packages/react-aria-components/docs/Select.mdx
@@ -86,7 +86,6 @@ import {ChevronDown} from 'lucide-react';
 
 .react-aria-Select {
   color: var(--text-color);
-  position: relative;
   max-width: 250px;
   width: fit-content;
 
@@ -1334,27 +1333,3 @@ it('Select can select an option via keyboard', async function () {
 ```
 
 <ClassAPI links={selectUtil.links} class={selectUtil.exports.SelectTester} />
-
-## Gotchas
-
-`Select` requires a `position: relative` either on itself or on a close parent. This is because
-the `Popover` component uses a hidden input to manage native form functionality. The hidden input
-is absolutely positioned and can spill out unexpectedly if the parent is not positioned relative
-causing unintended scroll bars to appear.
-
-Note: you do not need to set the style inline, you can use any CSS method to do it.
-
-```tsx render=false
-<Select style={{position: 'relative'}}>
-  <Label>Favorite Animal</Label>
-  <Button>
-    <SelectValue />
-    <span aria-hidden="true"><ChevronDown size={16} /></span>
-  </Button>
-  <Popover>
-    <ListBox>
-      ...
-    </ListBox>
-  </Popover>
-</Select>
-```
diff --git a/packages/react-aria-components/src/HiddenDateInput.tsx b/packages/react-aria-components/src/HiddenDateInput.tsx
@@ -50,7 +50,14 @@ export function useHiddenDateInput(props: HiddenDateInputProps, state: DateField
     isDisabled,
     name
   } = props;
-  let {visuallyHiddenProps} = useVisuallyHidden();
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      // Prevent page scrolling.
+      position: 'fixed',
+      top: 0,
+      left: 0
+    }
+  });
 
   let inputStep = 60;
   if (state.granularity === 'second') {
diff --git a/packages/react-aria-components/stories/Autocomplete.stories.tsx b/packages/react-aria-components/stories/Autocomplete.stories.tsx
@@ -838,7 +838,7 @@ export const AutocompleteMenuInPopoverDialogTrigger: MenuStory = {
 let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
 export const AutocompleteSelect = (): React.ReactElement => (
-  <Select style={{marginBottom: 40, position: 'relative'}}>
+  <Select style={{marginBottom: 40}}>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
       <SelectValue />
diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
@@ -48,7 +48,7 @@ export const FormAutoFillExample: FormStory = () => {
         <Label>Zip</Label>
         <Input name="city" type="text" id="city" autoComplete="shipping postal-code" />
       </TextField>
-      <Select style={{position: 'relative'}} name="country" id="country" autoComplete="shipping country">
+      <Select name="country" id="country" autoComplete="shipping country">
         <Label>Country</Label>
         <Button>
           <SelectValue />
diff --git a/packages/react-aria-components/stories/Select.stories.tsx b/packages/react-aria-components/stories/Select.stories.tsx
@@ -33,7 +33,7 @@ export default {
 export type SelectStory = StoryFn<typeof Select>;
 
 export const SelectExample: SelectStory = () => (
-  <Select data-testid="select-example" id="select-example-id" style={{position: 'relative'}}>
+  <Select data-testid="select-example" id="select-example-id">
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
       <SelectValue />
@@ -54,7 +54,7 @@ export const SelectExample: SelectStory = () => (
 );
 
 export const SelectRenderProps: SelectStory = () => (
-  <Select data-testid="select-render-props" style={{position: 'relative'}}>
+  <Select data-testid="select-render-props">
     {({isOpen}) => (
       <>
         <Label style={{display: 'block'}}>Test</Label>
@@ -144,7 +144,7 @@ const usStateOptions = [
 ];
 
 export const SelectManyItems: SelectStory = () => (
-  <Select style={{position: 'relative'}}>
+  <Select>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
       <SelectValue />
@@ -162,7 +162,7 @@ export const SelectManyItems: SelectStory = () => (
 );
 
 export const VirtualizedSelect: SelectStory = () => (
-  <Select style={{position: 'relative'}}>
+  <Select>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
       <SelectValue />
@@ -215,9 +215,9 @@ function AsyncVirtualizedCollectionRenderSelectRender(args: {delay: number}): JS
   });
 
   return (
-    <Select style={{position: 'relative'}}>
+    <Select>
       <Label style={{display: 'block'}}>Async Virtualized Collection render Select</Label>
-      <Button style={{position: 'relative'}}>
+      <Button>
         <SelectValue />
         {list.isLoading && <LoadingSpinner style={{right: '20px', left: 'unset', top: '0px', height: '100%', width: 20}} />}
         <span aria-hidden="true" style={{paddingLeft: 25}}>▼</span>
@@ -312,3 +312,103 @@ export const RequiredSelectWithManyItems = (props) => (
     <Button type="submit">Submit</Button>
   </form>
 );
+
+export const SelectScrollBug = () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'row', height: '100vh'}}>
+      <div style={{flex: 3}}>
+        Scrolling here should do nothing.
+      </div>
+
+      <div style={{flex: 1, overflowY: 'auto'}}>
+        Scrolling here should scroll the right side.
+        <br />
+        <br />
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
+        voluptatibus esse qui enim neque aliquam facere velit ipsa non,
+        voluptates aperiam odit minima dolorum harum! Facere eligendi officia
+        ipsam mollitia!
+        <br />
+        <br />
+        <br />
+        <Select>
+          <Label>Favorite Animal</Label>
+          <Button>
+            <SelectValue />
+            <span aria-hidden="true">▼</span>
+          </Button>
+          <Popover>
+            <ListBox>
+              <MyListBoxItem>Cat</MyListBoxItem>
+              <MyListBoxItem>Dog</MyListBoxItem>
+              <MyListBoxItem>Kangaroo</MyListBoxItem>
+            </ListBox>
+          </Popover>
+        </Select>
+      </div>
+    </div>
+  );
+};
