diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index af9d070b..f212bb9f 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,7 +10,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` where the play and pause buttons were transposed [#1147](https://github.com/shoelace-style/shoelace/issues/1147) - Fixed a bug that prevented `web-types.json` from being generated [#1154](https://github.com/shoelace-style/shoelace/discussions/1154) -- Fixe a bug in `` that prevented `sl-change` and `sl-input` from emitting when using the eye dropper [#1157](https://github.com/shoelace-style/shoelace/issues/1157) +- Fixed a bug in `` that prevented `sl-change` and `sl-input` from emitting when using the eye dropper [#1157](https://github.com/shoelace-style/shoelace/issues/1157) +- Fixed a bug in `` that prevented keyboard users from selecting menu items when using the keyboard [#1165](https://github.com/shoelace-style/shoelace/issues/1165) ## 2.0.0 diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 1710b42e..c7d66159 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -236,7 +236,7 @@ export default class SlDropdown extends ShoelaceElement { const menu = this.getMenu(); if (menu) { - const menuItems = menu.defaultSlot.assignedElements({ flatten: true }) as SlMenuItem[]; + const menuItems = menu.getAllItems(); const firstMenuItem = menuItems[0]; const lastMenuItem = menuItems[menuItems.length - 1]; diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index f85b43ec..f44ee3cd 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -29,16 +29,6 @@ export default class SlMenu extends ShoelaceElement { this.setAttribute('role', 'menu'); } - private getAllItems() { - return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => { - if (el.inert || !this.isMenuItem(el)) { - return false; - } - - return true; - }) as SlMenuItem[]; - } - private handleClick(event: MouseEvent) { const target = event.target as HTMLElement; const item = target.closest('sl-menu-item'); @@ -125,6 +115,16 @@ export default class SlMenu extends ShoelaceElement { ); } + /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */ + getAllItems() { + return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => { + if (el.inert || !this.isMenuItem(el)) { + return false; + } + return true; + }) as SlMenuItem[]; + } + /** * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index. * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.