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

* keep `<Combobox />` open when clicking in scrollbar on `<ComboboxOptions>`

* update changelog

* Update packages/@headlessui-react/CHANGELOG.md

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

* Update packages/@headlessui-react/src/components/combobox/combobox.tsx

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

* format comment

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

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 `<Dialog />` components at once (without nesting them) ([#3242](https://github.com/tailwindlabs/headlessui/pull/3242))
 
+### Fixed
+
+- Keep `<Combobox />` open when clicking scrollbar in `<ComboboxOptions>` ([#3249](https://github.com/tailwindlabs/headlessui/pull/3249))
+
 ## [2.0.4] - 2024-05-25
 
 ### Fixed

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -1676,6 +1676,18 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     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 `<Combobox>`
+  // inside of a `<Dialog>`, clicking the scrollbar of the `<ComboboxOptions>`
+  // will move focus to the `<Dialog>` which blurs the `<ComboboxInput>` and
+  // closes the `<Combobox>`.
+  //
+  // 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<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
       '--button-width': useElementSize(data.buttonRef, true).width,
     } as CSSProperties,
     onWheel: handleWheel,
+    onMouseDown: handleMouseDown,
   })
 
   // Map the children in a scrollable container when virtualization is enabled