[BUG] - Select scrolls page and immediately closes popover on click

[hyperborea]

NextUI Version

2.4.6

Describe the bug

Clicking a <Select/> trigger, when the currently selected key is sufficiently far down the list, causes the page to scroll and the popover not to show (or more precisely, close it immediately as soon as it's opened). It sometimes also seems to select another key.

When clicking the trigger again (at the new scroll position), the dropdown opens correctly. This assumes the new "stable" scroll position could actually be reached. I first encountered the issue on iOS Safari on my project where the container is position: fixed, so it just keeps scrolling when clicking the trigger.

Note that the page will scroll down when you're at the top. If you scroll down the page enough and click the select it will scroll up instead to get the component to the same "stable" scroll position.

This issue is driving me crazy, maybe someone else has an idea what's up.

Your Example Website or App

https://stackblitz.com/edit/nextui-select-scroll-bug?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. click select and pick "7" or higher
2. click select and observe bug

Note: the issue ONLY appears on "7" or higher, any items further up the list are fine. In other words, the item needs to partially or fully below the scroll threshold of the popover / scroll shadow.

Expected behavior

The dropdown should open normally and the page should not scroll up.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1221 Select scrolls down page on trigger click

[hyperborea]

It would appear to me like there's possibly two issues:

1. something causes the page to scroll
2. when the popover overlaps the component, the same click that opens the popover also selects whatever item is at the cursor

re 1, this only happens if the popover is long enough to scroll, i.e. removing max-h-64 from the popover removes the issue (but obviously also the scroll)
re 2, see https://stackblitz.com/edit/nextui-select-scroll-bug-wwb4gq?file=src%2FApp.tsx

[vavilondev]

I have the same issue. And had the same in previous versions.
Actually, you have that issue on your next ui page.

Screen.Recording.2024-07-29.at.17.20.03.mov

[hyperborea]

That's right, I've double checked and the problem seems to have been there since the component was introduced in 2.1.0. This is really quite problematic - at best it's bad UX (page is scrolled unnecessarily and requires a second click to open the component), at worst it prevents it from functioning at all (e.g. when positioned as sticky or fixed).

[n-d-r-d-g]

Same issue here. I agree with @hyperborea. I'm using the Select component in a sticky header and I need it to be a controlled component.

I've noticed that whenever i use defaultSelectedKeys or selectedKeys, I cannot open the Select unless I scroll to the top of the page. If I scroll even just a few pixels down and click the Select, it opens and closes immediately.

I'm using version 2.4.6.

[quiloos39]

Bump any updates having similar issues

[j-h-scheufen]

I'm facing the exact same problem using "@nextui-org/select": "^2.2.7".

[iamfrisbee]

I have had a hard time recreating it outside the app I'm working on but here is how you might see it.

1. https://4mjhgj-3000.csb.app/
2. Open chrome dev tools
3. Turn on the device toolbar
4. Choose the smallest device
5. Scroll to the very last select and try to update it

[zackteng]

I'm having this problem too. using "@nextui-org/select": "^2.2.7".
Does anyone know how to quickly fix this in my own project code?

[dragos99]

Same issue here, this is impacting UX to the point where users become frustrated. Unfortunately this makes NextUI an unusable library, which is a shame, because otherwise it's great.

[L1mit1337]

same too,Is the bug fixed? I'm still triggering this bug

[albangonzalez]

Same issue on NextUI 2.4.8. I'm thinking replacing with ugly native select while it get resolved.
Still, there's a pending PR #3698 from @macci001 waiting for review or changes that might resolve that bug