Prevent closing the Combobox component when clicking inside the scrollbar area (#3104)

* prevent closing `Combobox` when clicking inside the scrollbar area

* update changelog

Author: RobinMalfait

packages/@headlessui-vue/CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+### Fixed
+
+- Prevent closing the `Combobox` component when clicking inside the scrollbar area ([#3104](https://github.com/tailwindlabs/headlessui/pull/3104))
+
 ## [1.7.20] - 2024-04-15
 
 ### Fixed

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -1382,6 +1382,15 @@ export let ComboboxOptions = defineComponent({
       },
     })
 
+    /**
+     * Prevent focus from being lost if the user clicks on the scrollbar.
+     * Otherwise the `ComboboxInput` will lose focus and the combobox will
+     * close.
+     */
+    function handleMouseDown(event: MouseEvent) {
+      event.preventDefault()
+    }
+
     return () => {
       let slot = { open: api.comboboxState.value === ComboboxStates.Open }
       let ourProps = {
@@ -1390,6 +1399,7 @@ export let ComboboxOptions = defineComponent({
         ref: api.optionsRef,
         role: 'listbox',
         'aria-multiselectable': api.mode.value === ValueMode.Multi ? true : undefined,
+        onMousedown: handleMouseDown,
       }
       let theirProps = omit(props, ['hold'])