fix menu bug

docs/resources/changelog.md

@@ -50,6 +50,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
 - Fixed a bug in `sl-radio-group` where clicking a radio button would cause the wrong control to be focused
 - Fixed a bug in `sl-button` and `sl-icon-button` where an unintended `ref` attribute was present
 - Fixed a bug in the focus-visible utility that failed to respond to mouseup events
+- Fixed a bug where clicking on a menu item would persist its hover/focus state
 - Improved contrast throughout all components [#128](https://github.com/shoelace-style/shoelace/issues/128)
 - Refactored thumb position logic in `sl-switch` [#490](https://github.com/shoelace-style/shoelace/pull/490)
 - Reworked the dark theme to use an inverted token approach instead of light DOM selectors

src/components/menu-item/menu-item.styles.ts

@@ -60,7 +60,7 @@ export default css`
   }
 
   :host(:hover:not([aria-disabled='true'])) .menu-item,
-  :host(:focus:not([aria-disabled='true'])) .menu-item {
+  :host(.sl-focus-visible:focus:not([aria-disabled='true'])) .menu-item {
     outline: none;
     background-color: rgb(var(--sl-color-primary-600));
     color: rgb(var(--sl-color-neutral-1000));

src/components/menu/menu.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
 import { getTextContent } from '../../internal/slot';
+import { focusVisible } from '../../internal/focus-visible';
 import type SlMenuItem from '../menu-item/menu-item';
 import styles from './menu.styles';
 
@@ -25,6 +26,19 @@ export default class SlMenu extends LitElement {
   private typeToSelectString = '';
   private typeToSelectTimeout: any;
 
+  connectedCallback() {
+    super.connectedCallback();
+    focusVisible.observe(this, {
+      visible: () => this.getAllItems().map(item => item.classList.add('sl-focus-visible')),
+      notVisible: () => this.getAllItems().map(item => item.classList.remove('sl-focus-visible'))
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    focusVisible.unobserve(this);
+  }
+
   getAllItems(options: { includeDisabled: boolean } = { includeDisabled: true }) {
     return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {
       if (el.getAttribute('role') !== 'menuitem') {

src/internal/focus-visible.ts

@@ -6,14 +6,29 @@
 //
 const listeners = new WeakMap();
 
-export function observe(el: HTMLElement) {
+interface ObserveOptions {
+  visible: () => void;
+  notVisible: () => void;
+}
+
+export function observe(el: HTMLElement, options?: ObserveOptions) {
   const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
   const is = (event: KeyboardEvent) => {
     if (keys.includes(event.key)) {
       el.classList.add('focus-visible');
+
+      if (options?.visible) {
+        options.visible();
+      }
+    }
+  };
+  const isNot = () => {
+    el.classList.remove('focus-visible');
+
+    if (options?.notVisible) {
+      options.notVisible();
     }
   };
-  const isNot = () => el.classList.remove('focus-visible');
   listeners.set(el, { is, isNot });
 
   el.addEventListener('keydown', is);