From 9f44656d0f590b3436eab2a604da9dbdb45629a2 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 16 Apr 2024 17:35:46 +0200 Subject: [PATCH] Prevent closing the `Combobox` component when clicking inside the scrollbar area (#3104) * prevent closing `Combobox` when clicking inside the scrollbar area * update changelog --- packages/@headlessui-vue/CHANGELOG.md | 4 ++++ .../src/components/combobox/combobox.ts | 10 ++++++++++ 2 files changed, 14 insertions(+) diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index bfc264d..6c95a9e 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/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 `` 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 diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts index e3e4cc3..2ee2108 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.ts +++ b/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'])