backport PR 1599

docs/pages/resources/changelog.md

@@ -25,6 +25,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Added the Simplified Chinese translation [#1604]
 - Fixed a bug [in the localize dependency](https://github.com/shoelace-style/localize/issues/20) that caused underscores in language codes to throw a `RangeError`
 - Fixed a bug in `<sl-copy-button>` that prevented exported tooltip parts from being styled [#1586]
+- Fixed a bug in `<sl-menu>` that caused it not to fire the `sl-select` event if you clicked an element inside of a `<sl-menu-item>` [#1599]
 - Updated `@shoelace-style/localize` to 3.1.0
 
 ## 2.9.0

src/components/menu/menu.component.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
 import styles from './menu.styles.js';
-import WaMenuItem from '../menu-item/menu-item.component.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { CSSResultGroup } from 'lit';
+import type WaMenuItem from '../menu-item/menu-item.component.js';
 export interface MenuSelectEventDetail {
   item: WaMenuItem;
 }
@@ -29,11 +29,14 @@ export default class WaMenu extends WebAwesomeElement {
   }
 
   private handleClick(event: MouseEvent) {
-    if (!(event.target instanceof WaMenuItem)) {
-      return;
-    }
+    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];
 
-    const item: WaMenuItem = event.target;
+    const target = event.composedPath().find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));
+
+    if (!target) return;
+
+    // This isn't true. But we use it for TypeScript checks below.
+    const item = target as WaMenuItem;
 
     if (item.type === 'checkbox') {
       item.checked = !item.checked;

src/components/menu/menu.test.ts

@@ -100,4 +100,24 @@ describe('<wa-menu>', () => {
 
     expect(selectHandler).to.not.have.been.called;
   });
+
+  // @see https://github.com/shoelace-style/shoelace/issues/1596
+  it('Should fire "wa-select" when clicking an element within a menu-item', async () => {
+    // eslint-disable-next-line
+    const selectHandler = sinon.spy(() => {});
+
+    const menu: WaMenu = await fixture(html`
+      <wa-menu>
+        <wa-menu-item>
+          <span>Menu item</span>
+        </wa-menu-item>
+      </wa-menu>
+    `);
+
+    menu.addEventListener('wa-select', selectHandler);
+    const span = menu.querySelector('span')!;
+    await clickOnElement(span);
+
+    expect(selectHandler).to.have.been.calledOnce;
+  });
 });