From 8b4363d7a474448078c4a996c8a97b35003767b0 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 17 Nov 2022 15:00:26 +0100
Subject: [PATCH] Ensure `shift+home` and `shift+end` works as expected in the
 `Combobox.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
---
 packages/@headlessui-react/CHANGELOG.md          |  1 +
 .../src/components/combobox/combobox.tsx         | 16 ++++++++++++++++
 packages/@headlessui-vue/CHANGELOG.md            |  1 +
 .../src/components/combobox/combobox.ts          | 16 ++++++++++++++++
 4 files changed, 34 insertions(+)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index c3533c798..87539f0dc 100644
--- 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
index 8e463aa1b..005bd974b 100644
--- 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
index 7bf334c2b..c8a7bb542 100644
--- 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
index f6d32e9c7..ab8437db7 100644
--- 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()