Prevent closing the Combobox component when clicking inside the scr…

…ollbar area (#3104)

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

* update changelog

packages/@headlessui-vue/CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
 - Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779))
 
+### 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

@@ -1372,6 +1372,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 = {
@@ -1380,6 +1389,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'])