diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index e3b7ee3deb..79c01b50ea 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -1761,4 +1761,4 @@ The following pages demonstrate why this change was necessary. ## 2.0.0-beta.1 -- Initial release \ No newline at end of file +- Initial release diff --git a/src/components/menu/menu.component.ts b/src/components/menu/menu.component.ts index d916eda38c..627e64cebb 100644 --- a/src/components/menu/menu.component.ts +++ b/src/components/menu/menu.component.ts @@ -33,14 +33,14 @@ export default class SlMenu extends ShoelaceElement { private handleClick(event: MouseEvent) { const menuItemTypes = ['menuitem', 'menuitemcheckbox']; - const composedPath = event.composedPath() + const composedPath = event.composedPath(); const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || '')); if (!target) return; - const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.("role") === "menu") - const clickHasSubmenu = closestMenu !== this - if (clickHasSubmenu) return + const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu'); + const clickHasSubmenu = closestMenu !== this; + if (clickHasSubmenu) return; // This isn't true. But we use it for TypeScript checks below. const item = target as SlMenuItem; diff --git a/src/components/menu/menu.test.ts b/src/components/menu/menu.test.ts index 29ff01ca08..c4a0ebf863 100644 --- a/src/components/menu/menu.test.ts +++ b/src/components/menu/menu.test.ts @@ -1,6 +1,6 @@ import '../../../dist/shoelace.js'; import { clickOnElement } from '../../internal/test.js'; -import { aTimeout, expect, fixture } from '@open-wc/testing'; +import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit'; import { sendKeys } from '@web/test-runner-commands'; import sinon from 'sinon'; @@ -123,7 +123,7 @@ it('Should fire "sl-select" when clicking an element within a menu-item', async expect(selectHandler).to.have.been.calledOnce; }); -it.only("Should be able to check a checkbox menu item in a submenu", async () => { +it.only('Should be able to check a checkbox menu item in a submenu', async () => { const menu: SlMenu = await fixture(html` @@ -135,14 +135,13 @@ it.only("Should be able to check a checkbox menu item in a submenu", async () => `); + const menuItem = menu.querySelector('sl-menu-item')!; + const checkbox = menu.querySelector("[type='checkbox']")!; - const menuItem = menu.querySelector("sl-menu-item")! - const checkbox = menu.querySelector("[type='checkbox']")! - - expect(checkbox.checked).to.equal(true) - await clickOnElement(menuItem) // Focus the menu item - await sendKeys({ press: "ArrowRight" }) // Open the submenu - await clickOnElement(checkbox) // Click the checkbox - await checkbox.updateComplete - expect(checkbox.checked).to.equal(false) -}) + expect(checkbox.checked).to.equal(true); + await clickOnElement(menuItem); // Focus the menu item + await sendKeys({ press: 'ArrowRight' }); // Open the submenu + await clickOnElement(checkbox); // Click the checkbox + await checkbox.updateComplete; + expect(checkbox.checked).to.equal(false); +});