Select: scroll bar flicker

[bhainesva]

Description

When I have a Select component with enough options to require a scroll bar, moving the mouse between items causes the scroll bar to flicker in and out of view.

select-flicker.mov

Link to Reproduction

https://codesandbox.io/p/devbox/saas-ui-switch-defaultchecked-forked-mn8k7t?file=%2Fsrc%2Findex.tsx&workspaceId=ws_7937KbdDcRVQyJ4zFBAHTs

Steps to reproduce

1. Go to https://codesandbox.io/p/devbox/saas-ui-switch-defaultchecked-forked-mn8k7t?file=%2Fsrc%2Findex.tsx&workspaceId=ws_7937KbdDcRVQyJ4zFBAHTs
2. Click on the Select component
3. Make sure your window is short enough that the select options scroll
4. Move your cursor up and down the list

Saas UI Version

2.11.4

Chakra UI Version

2.10.8

Browser

139.0.4 (aarch64)

Operating System

• macOS
• Windows
• Linux

Additional Information

I only see this behavior in Firefox, not Chrome. In Chrome I see a different but potentially related issue where hovering in a particular place causes the menu to rapidly shift position.

chrome-flicker.mov

[linear]

SUI-671 Select: scroll bar flicker

[Pagebakers]

Hmm any idea what could cause this?

[Pagebakers]

Took another look, seems like the available hight in Firefox is calculated incorrectly.