Skip to content

Conversation

@snowystinger
Copy link
Member

@snowystinger snowystinger commented Jun 19, 2025

Closes #8365

Same resolution and stance as docs: clear up relative position confusion

I built 2 stories based on the Issue codesandbox showing how to fix the issue in RAC and that it was fixed in S2.
RAC: https://reactspectrum.blob.core.windows.net/reactspectrum/9dad0030b38287caaec7c986ea03552af3898ca7/storybook/index.html?path=/story/react-aria-components--select-scroll-bug&providerSwitcher-express=false
S2: https://reactspectrum.blob.core.windows.net/reactspectrum/6643df292ebf895d83c05dbc3f9d5b20785c1654/storybook-s2/index.html?path=/story/picker--select-scroll-bug

There is still a little scrolling in the S2 story due to a margin, not due to the Picker. If the change hadn't been applied, then there would be a massive extra scrolling region.

I removed the stories for the PR because we have a number of these that we don't check again which end up as noise.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@rspbot
Copy link

rspbot commented Jun 19, 2025

Build successful! 🎉

@snowystinger snowystinger changed the title Fix picker overflow bug fix: picker overflow bug Jun 19, 2025
@rspbot
Copy link

rspbot commented Jun 19, 2025

Build successful! 🎉

LFDanLu
LFDanLu previously approved these changes Jun 20, 2025
Copy link
Member

@LFDanLu LFDanLu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems straight forward enough, verified the fix through your stories in the dscription


export const AutocompleteSelect = () => (
<Select style={{marginBottom: 40}}>
<Select style={{marginBottom: 40, position: 'relative'}}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume these story changes are just to make sure nothing else changes with the addition of the style? I'm not able to reproduce the original issue on main in these stories so I'm assuming these didn't match the required conditions

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct, it's more about making sure that all instances and uses of it ourselves showcase the correct setup

yihuiliao
yihuiliao previously approved these changes Jun 23, 2025
# Conflicts:
#	packages/react-aria-components/docs/Select.mdx
@snowystinger snowystinger dismissed stale reviews from yihuiliao and LFDanLu via f5e01ae June 23, 2025 21:39
@rspbot
Copy link

rspbot commented Jun 23, 2025

@snowystinger snowystinger added this pull request to the merge queue Jun 23, 2025
Merged via the queue into main with commit 6bdca86 Jun 23, 2025
31 checks passed
@snowystinger snowystinger deleted the fix-picker-overflow-bug branch June 23, 2025 23:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

<Select /> causes scrollbar to appear when near bottom of the page

5 participants