Only select the active option when using "singular" mode (#1750)

* only select the active option when using "singular" mode * update changelog
tailwindlabs · Aug 9, 2022 · 122eed7 · 122eed7
1 parent 4c433cd
commit 122eed7
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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))
 - Ensure `Disclosure.Panel` is properly linked ([#1747](https://github.com/tailwindlabs/headlessui/pull/1747))
+- Only select the active option when using "singular" mode when pressing `<tab>` in the `Combobox` component ([#1750](https://github.com/tailwindlabs/headlessui/pull/1750))
 
 ## Changed
 

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -710,7 +710,7 @@ let Input = forwardRefWithAs(function Input<
 
       case Keys.Tab:
         if (data.comboboxState !== ComboboxState.Open) return
-        actions.selectActiveOption()
+        if (data.mode === ValueMode.Single) actions.selectActiveOption()
         actions.closeCombobox()
         break
     }

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don't overwrite `element.focus()` on `<PopoverPanel>` ([#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))
+- Only select the active option when using "singular" mode when pressing `<tab>` in the `Combobox` component ([#1750](https://github.com/tailwindlabs/headlessui/pull/1750))
 
 ## [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
@@ -738,7 +738,7 @@ export let ComboboxInput = defineComponent({
 
         case Keys.Tab:
           if (api.comboboxState.value !== ComboboxStates.Open) return
-          api.selectActiveOption()
+          if (api.mode.value === ValueMode.Single) api.selectActiveOption()
           api.closeCombobox()
           break
       }