From c41714c6f3de92a0222b1ae474ed1b17be294b2e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 20 Aug 2021 09:55:32 -0400
Subject: [PATCH] fix menu selection via type to select

---
 src/components/menu/menu.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 13887fe77..f43e61e35 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -84,6 +84,11 @@ export default class SlMenu extends LitElement {
     clearTimeout(this.typeToSelectTimeout);
     this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);
     this.typeToSelectString += key.toLowerCase();
+
+    // The menu may not have focus, so the focus visible logic may not be triggered. Because we know they're using the
+    // keyboard, we can force the sl-focus-visible class on each item so the selection shows as expected.
+    this.getAllItems().map(item => item.classList.add('sl-focus-visible'));
+
     for (const item of items) {
       const slot = item.shadowRoot!.querySelector('slot:not([name])') as HTMLSlotElement;
       const label = getTextContent(slot).toLowerCase().trim();