From 5e6add724d63fae5516cc9674066f6888e0f1f77 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 9 Mar 2022 16:07:11 -0500
Subject: [PATCH] fix home and end in dropdown

---
 docs/resources/changelog.md         | 1 +
 src/components/dropdown/dropdown.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index dfa5668e1..2a4112fa8 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -25,6 +25,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added more tests for `<sl-input>`, `<sl-select>`, and `<sl-textarea>`
 - Fixed a bug that prevented forms from submitting when pressing <kbd>Enter</kbd> inside of an `<sl-input>` [#700](https://github.com/shoelace-style/shoelace/issues/700)
 - Fixed a bug in `<sl-input>` that prevented the `valueAsDate` and `valueAsNumber` properties from working when set before the component was initialized
+- Fixed a bug in `<sl-dropdown>` where pressing <kbd>Home</kbd> or <kbd>End</kbd> wouldn't select the first or last menu items, respectively
 - Improved `autofocus` behavior in Safari for `<sl-dialog>` and `<sl-drawer>` [#693](https://github.com/shoelace-style/shoelace/issues/693)
 - Improved type to select logic in `<sl-menu>` so it supports <kbd>Backspace</kbd> and gives users more time before resetting
 - Improved checkmark size and positioning in `<sl-menu-item>`
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index dcfe495b5..36f0e3554 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -230,7 +230,7 @@ export default class SlDropdown extends LitElement {
     // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
     // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
     // faster navigation.
-    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
       event.preventDefault();
 
       // Show the menu if it's not already open
@@ -240,12 +240,12 @@ export default class SlDropdown extends LitElement {
 
       // Focus on the first/last menu item after showing
       requestAnimationFrame(() => {
-        if (event.key === 'ArrowDown') {
+        if (event.key === 'ArrowDown' || event.key === 'Home') {
           menu.setCurrentItem(firstMenuItem);
           firstMenuItem.focus();
         }
 
-        if (event.key === 'ArrowUp') {
+        if (event.key === 'ArrowUp' || event.key === 'End') {
           menu.setCurrentItem(lastMenuItem);
           lastMenuItem.focus();
         }