search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Keep `<Combobox />` open when clicking in scrollbar on `<ComboboxOptions>` #3249

Closed RobinMalfait closed 4 months ago

RobinMalfait commented 4 months ago

This PR fixes an issue where a <Combobox> would close if you click inside the scrollbar area on the <ComboboxOptions>. This is because clicking inside the scrollbar area performs a click on the element below the scrollbar (at least on macOS). If the element below is focusable, then focus will be moved there.

If focus is moved to the underlying element, then the <ComboboxInput> will blur which causes the <Combobox> will close.

This issue can be seen in #3230 where using the <Combobox> inside the <Dialog> then clicking in the scrollbar area of the <ComboboxOptions> will move the focus to the <Dialog> itself and closes the <Combobox>.

Fixes: #3230

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 28, 2024 1:31pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 28, 2024 1:31pm