Skip to content

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

Open
@IonelLupu

Description

@IonelLupu

Provide a general summary of the issue here

When using the <Select /> component from react-aria-components, if the component is placed near the bottom of the page in a overflow: auto parent, an unexpected vertical scrollbar to appear on the html tag.

Screen.Recording.2025-06-09.at.07.38.47.mov

🤔 Expected Behavior?

The Select placed close to the bottom of the page should not affect the page layout — specifically, it should not cause the body to overflow or a scrollbar to appear if it's parent has overflow: auto

😯 Current Behavior

Placing a <Select /> close the the bottom of the page in a overflow: auto parent causes the html tag to show a scroll bar instead of keeping only the Select's parent scroll bar

💁 Possible Solution

No response

🔦 Context

A normal <select /> element doesn't have the same issue.

🖥️ Steps to Reproduce

Link: https://codesandbox.io/p/devbox/lucid-mirzakhani-m6yys9?workspaceId=ws_SQ5nesRrffQb7ChCog6mDH

Steps to Reproduce:
1. Have div inside the body be flex row with two children: the left one can be "flex: 3" . The right one can be flex: 1. It will also contain the Select.
2. Place a <Select /> component near the bottom of a page in the right child described above. You may use text to fill in the top of the page.
3. Observe that a vertical scrollbar appears on the page both when you scroll while having the mouse on the left and right children. There are two different scroll bars.

Version

1.10.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS 15.3.2

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions