Listbox not closing when scrolling the page

r1chm8 commented 2 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v2.1.2

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/sandbox/nameless-snow-kxmc7z

Describe your issue

Have two listbox components on the same page with the modal={false} prop
Open one of the listboxes
Scroll the page to a different position from where you opened the first listbox
Click on the second listbox button
Second listbox opens
The problem is the first listbox also remains open

Expected behaviour is for the first listbox to close when opening the second one. The expect behaviour happens if you do not scroll the page, scrolling seems to be causing the issue.

https://github.com/user-attachments/assets/2cf52408-b33b-4b74-9ada-6f731541a674

RobinMalfait commented 1 month ago

Hey! This should be fixed by #3407, and will be available in the next release.

You can already try it using:

npm install @headlessui/react@insiders.

r1chm8 commented 1 month ago

Looks good, thank you for sorting out this bug so quickly.

tailwindlabs / headlessui

Listbox not closing when scrolling the page #3403