diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index dfa5668e..2a4112fa 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 ``, ``, and `` - Fixed a bug that prevented forms from submitting when pressing Enter inside of an `` [#700](https://github.com/shoelace-style/shoelace/issues/700) - Fixed a bug in `` that prevented the `valueAsDate` and `valueAsNumber` properties from working when set before the component was initialized +- Fixed a bug in `` where pressing Home or End wouldn't select the first or last menu items, respectively - Improved `autofocus` behavior in Safari for `` and `` [#693](https://github.com/shoelace-style/shoelace/issues/693) - Improved type to select logic in `` so it supports Backspace and gives users more time before resetting - Improved checkmark size and positioning in `` diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index dcfe495b..36f0e355 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(); }