Ensure shift+home and shift+end works as expected in the `Combobo…

…x.Input` component (#2024) * ensure shift+home and shift+end works as expected While testing with a normal input, the Home and End keys don't do anything on their own, so therefore using them to go to the first or last item respectively is still a good solution. However, shift+home and shift+end will do _something_, it will select the text in the input. * update changelog
tailwindlabs · Nov 17, 2022 · 8b4363d · 8b4363d
1 parent a4c7cab
commit 8b4363d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 0 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reset form-like components when the parent `<form>` resets ([#2004](https://github.com/tailwindlabs/headlessui/pull/2004))
 - Add warning when using `<Popover.Button />` multiple times ([#2007](https://github.com/tailwindlabs/headlessui/pull/2007))
 - Ensure Popover doesn't crash when `focus` is going to `window` ([#2019](https://github.com/tailwindlabs/headlessui/pull/2019))
+- Ensure `shift+home` and `shift+end` works as expected in the `Combobox.Input` component ([#2024](https://github.com/tailwindlabs/headlessui/pull/2024))
 
 ## [1.7.4] - 2022-11-03
 

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -817,12 +817,28 @@ let Input = forwardRefWithAs(function Input<
         })
 
       case Keys.Home:
+        if (event.shiftKey) {
+          break
+        }
+
+        event.preventDefault()
+        event.stopPropagation()
+        return actions.goToOption(Focus.First)
+
       case Keys.PageUp:
         event.preventDefault()
         event.stopPropagation()
         return actions.goToOption(Focus.First)
 
       case Keys.End:
+        if (event.shiftKey) {
+          break
+        }
+
+        event.preventDefault()
+        event.stopPropagation()
+        return actions.goToOption(Focus.Last)
+
       case Keys.PageDown:
         event.preventDefault()
         event.stopPropagation()

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Reset form-like components when the parent `<form>` resets ([#2004](https://github.com/tailwindlabs/headlessui/pull/2004))
 - Ensure Popover doesn't crash when `focus` is going to `window` ([#2019](https://github.com/tailwindlabs/headlessui/pull/2019))
+- Ensure `shift+home` and `shift+end` works as expected in the `ComboboxInput` component ([#2024](https://github.com/tailwindlabs/headlessui/pull/2024))
 
 ## [1.7.4] - 2022-11-03
 

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -775,12 +775,28 @@ export let ComboboxInput = defineComponent({
           })
 
         case Keys.Home:
+          if (event.shiftKey) {
+            break
+          }
+
+          event.preventDefault()
+          event.stopPropagation()
+          return api.goToOption(Focus.First)
+
         case Keys.PageUp:
           event.preventDefault()
           event.stopPropagation()
           return api.goToOption(Focus.First)
 
         case Keys.End:
+          if (event.shiftKey) {
+            break
+          }
+
+          event.preventDefault()
+          event.stopPropagation()
+          return api.goToOption(Focus.Last)
+
         case Keys.PageDown:
           event.preventDefault()
           event.stopPropagation()