fixes #382

docs/getting-started/changelog.md

@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Fixed a bug where using `sl-menu` inside a shadow root would break keyboard selections [#382](https://github.com/shoelace-style/shoelace/issues/382)
+
 ## 2.0.0-beta.34
 
 This release changes the way components are registered if you're [cherry picking](/getting-started/installation?id=cherry-picking) or [using a bundler](/getting-started/installation?id=bundling). This recommendation came from the LitElement team and simplifies Shoelace's dependency graph. It also eliminates the need to call a `register()` function before using each component.

src/components/menu/menu.ts

@@ -53,7 +53,7 @@ export default class SlMenu extends LitElement {
   }
 
   getActiveItem() {
-    return this.getItems().find(i => i === document.activeElement);
+    return this.getItems().filter(i => i.shadowRoot!.querySelector('.menu-item--focused'))[0];
   }
 
   setActiveItem(item: SlMenuItem) {
@@ -89,7 +89,7 @@ export default class SlMenu extends LitElement {
     if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
       const items = this.getItems();
       const selectedItem = this.getActiveItem();
-      let index = selectedItem ? items.indexOf(selectedItem) : 0;
+      let index = selectedItem ? items.findIndex(item => item === selectedItem) : 0;
 
       if (items.length) {
         event.preventDefault();