diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index de477fd0c3..38e85b5df5 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 then a `click` will be triggered on + // the focusable element _below_ the scrollbar. If you use a `` + // inside of a ``, then clicking in the scrollbar of the + // `` will move focus to the `` which blurs the + // `` which closes the ``. + // + // Preventing this default behavior in the `mousedown` event (which happens + // before `click`) will prevent this issue becaus 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