diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 2c1cfd2..84cdbd7 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add ability to render multiple `` components at once (without nesting them) ([#3242](https://github.com/tailwindlabs/headlessui/pull/3242)) +### Fixed + +- Keep `` open when clicking scrollbar in `` ([#3249](https://github.com/tailwindlabs/headlessui/pull/3249)) + ## [2.0.4] - 2024-05-25 ### Fixed diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index de477fd..7b745a1 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -1676,6 +1676,18 @@ function OptionsFn( actions.setActivationTrigger(ActivationTrigger.Pointer) }) + // When clicking inside of the scrollbar, a `click` event will be triggered on + // the focusable element _below_ the scrollbar. If you use a `` + // inside of a ``, clicking the scrollbar of the `` + // will move focus to the `` which blurs the `` and + // closes the ``. + // + // Preventing the default behavior in the `mousedown` event (which happens + // before `click`) will prevent this issue because the `click` never fires. + let handleMouseDown = useEvent((event: ReactMouseEvent) => { + event.preventDefault() + }) + let ourProps = mergeProps(anchor ? getFloatingPanelProps() : {}, { 'aria-labelledby': labelledBy, role: 'listbox', @@ -1688,6 +1700,7 @@ function OptionsFn( '--button-width': useElementSize(data.buttonRef, true).width, } as CSSProperties, onWheel: handleWheel, + onMouseDown: handleMouseDown, }) // Map the children in a scrollable container when virtualization is enabled