From 4d88dd9d7e95c368e80dc79ac9f49a4669930528 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 1 Aug 2022 15:27:39 +0200 Subject: [PATCH] Improve `Combobox` re-opening keyboard issue on mobile (#1732) * prevent re-focusing Combobox Input after choosing selection On mobile this gives a bit of annoying results where after choosing an option, the keyboard is shown again because the input is focused again. * update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + packages/@headlessui-react/src/components/combobox/combobox.tsx | 1 - packages/@headlessui-vue/CHANGELOG.md | 1 + packages/@headlessui-vue/src/components/combobox/combobox.ts | 1 - 4 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 86a20337b1..3abfc76eaa 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Improve event handler merging ([#1715](https://github.com/tailwindlabs/headlessui/pull/1715)) - Fix incorrect scrolling to the bottom when opening a `Dialog` ([#1716](https://github.com/tailwindlabs/headlessui/pull/1716)) - Make form components uncontrollable ([#1683](https://github.com/tailwindlabs/headlessui/pull/1683)) +- Improve `Combobox` re-opening keyboard issue on mobile ([#1732](https://github.com/tailwindlabs/headlessui/pull/1732)) ## [1.6.6] - 2022-07-07 diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index 957ea5a0ab..c9585419ce 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -1069,7 +1069,6 @@ let Option = forwardRefWithAs(function Option< select() if (data.mode === ValueMode.Single) { actions.closeCombobox() - data.inputRef.current?.focus({ preventScroll: true }) } }) diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 5c08cc0a0c..4ae877fa9f 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix incorrect scrolling to the bottom when opening a `Dialog` ([#1716](https://github.com/tailwindlabs/headlessui/pull/1716)) - Don't overwrite `element.focus()` on `` ([#1719](https://github.com/tailwindlabs/headlessui/pull/1719)) - Make form components uncontrollable ([#1683](https://github.com/tailwindlabs/headlessui/pull/1683)) +- Improve `Combobox` re-opening keyboard issue on mobile ([#1732](https://github.com/tailwindlabs/headlessui/pull/1732)) ## [1.6.7] - 2022-07-12 diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts index c314429070..c3ac02328c 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts @@ -915,7 +915,6 @@ export let ComboboxOption = defineComponent({ api.selectOption(id) if (api.mode.value === ValueMode.Single) { api.closeCombobox() - dom(api.inputRef)?.focus({ preventScroll: true }) } }