fix(web-components): fix enterkey interaction on menu (microsoft#31894)

change/@fluentui-web-components-e417861e-ef1b-4b4f-8c25-fef57cda85d9.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "fix(web-components): fix menu enterkey interaction ",
+ "packageName": "@fluentui/web-components",
+ "email": "rupertdavid@microsoft.com",
+ "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -2292,7 +2292,7 @@ export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListE
 
 // @public
 export class Menu extends FASTElement {
- closeMenu: () => void;
+ closeMenu: (event?: Event) => void;
  closeOnScroll?: boolean;
  closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
  connectedCallback(): void;

packages/web-components/src/menu/menu.spec.ts

@@ -0,0 +1,165 @@
+import { expect, test } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+import { fixtureURL } from '../helpers.tests.js';
+import type { Menu } from './menu.js';
+
+const menuFixture = `
+<fluent-menu>
+ <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
+ <fluent-menu-list>
+ <fluent-menu-item>Menu item 1</fluent-menu-item>
+ <fluent-menu-item>Menu item 2</fluent-menu-item>
+ <fluent-menu-item>Menu item 3</fluent-menu-item>
+ <fluent-menu-item>Menu item 4</fluent-menu-item>
+ </fluent-menu-list>
+</fluent-menu>
+`;
+
+test.describe('Menu', () => {
+ let page: Page;
+ let element: Locator;
+ let menuButton: Locator;
+ let menuList: Locator;
+ let menuItems: Locator;
+
+ test.beforeAll(async ({ browser }) => {
+ page = await browser.newPage();
+
+ element = page.locator('fluent-menu');
+
+ menuButton = element.locator('fluent-menu-button');
+
+ menuList = element.locator('fluent-menu-list');
+
+ menuItems = menuList.locator('fluent-menu-item');
+
+ await page.goto(fixtureURL('components-menu--default'));
+
+ page.setContent(menuFixture);
+ });
+
+ test.afterAll(async () => {
+ await page.close();
+ });
+
+ test('should have menu-list be initially hidden', async () => {
+ await expect(menuList).toBeHidden();
+ });
+
+ test('should be visible when the button is clicked', async () => {
+ await menuButton.click();
+
+ await expect(menuList).toBeVisible();
+ });
+
+ test('should be hidden when the button is clicked again', async () => {
+ page.setContent(menuFixture);
+
+ await menuButton.click();
+
+ await expect(menuList).toBeVisible();
+
+ await menuButton.click();
+
+ await expect(menuList).toBeHidden();
+ });
+
+ test('should be hidden when an item is clicked', async () => {
+ page.setContent(menuFixture);
+
+ await menuButton.click();
+
+ await expect(menuList).toBeVisible();
+
+ await menuItems.first().click();
+
+ await expect(menuList).toBeHidden();
+ });
+
+ test('should close when an item is keyboard clicked', async () => {
+ page.setContent(menuFixture);
+
+ await menuButton.click();
+
+ await expect(menuList).toBeVisible();
+
+ await menuItems.first().focus();
+
+ await page.keyboard.press('Enter');
+
+ await expect(menuList).toBeHidden();
+ });
+
+ test('should be hidden when clicked outside', async () => {
+ page.setContent(menuFixture);
+
+ await menuButton.click();
+
+ await expect(menuList).toBeVisible();
+
+ await page.mouse.click(0, 0);
+
+ await expect(menuList).toBeHidden();
+ });
+
+ test('should be hidden when the escape key is pressed', async () => {
+ page.setContent(menuFixture);
+
+ await menuButton.click();
+
+ await expect(menuList).toBeVisible();
+
+ await page.keyboard.press('Escape');
+
+ await expect(menuList).toBeHidden();
+ });
+
+ test('should be hidden when the escape key is pressed on an item', async () => {
+ page.setContent(menuFixture);
+
+ await menuButton.click();
+
+ await expect(menuList).toBeVisible();
+
+ await menuItems.first().focus();
+
+ await page.keyboard.press('Escape');
+
+ await expect(menuList).toBeHidden();
+ });
+
+ test('should open on hover when openOnHover is true', async () => {
+ page.setContent(menuFixture);
+
+ await expect(menuList).toBeHidden();
+ await menuButton.hover();
+ await expect(menuList).toBeHidden();
+ await page.mouse.move(0, 0);
+
+ await element.evaluate((x: Menu) => {
+ x.openOnHover = true;
+ });
+
+ await expect(menuList).toBeHidden();
+
+ await menuButton.hover();
+
+ await expect(menuList).toBeVisible();
+ });
+
+ test('should open on context when openOnContext is true', async () => {
+ page.setContent(menuFixture);
+
+ await expect(menuList).toBeHidden();
+ await menuButton.click({ button: 'right' });
+ await expect(menuList).toBeHidden();
+
+ await element.evaluate((x: Menu) => {
+ x.openOnContext = true;
+ });
+
+ await expect(menuList).toBeHidden();
+ await menuButton.dispatchEvent('contextmenu');
+ await expect(menuList).toBeVisible();
+ });
+});

packages/web-components/src/menu/menu.stories.ts

@@ -121,3 +121,32 @@ export const MenuWithMaxHeight = renderComponent(html<MenuStoryArgs>`
  </fluent-menu>
  </div>
 `);
+
+export const MenuWithInteractiveItems = renderComponent(html<MenuStoryArgs>`
+ <div class="container">
+ <fluent-menu>
+ <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
+ <fluent-menu-list>
+ <fluent-menu-item>
+ Item 1
+ <fluent-menu-list slot="submenu">
+ <fluent-menu-item> Subitem 1 </fluent-menu-item>
+ <fluent-menu-item> Subitem 2 </fluent-menu-item>
+ </fluent-menu-list>
+ </fluent-menu-item>
+
+ <fluent-menu-item role="menuitemcheckbox"> Item 2 </fluent-menu-item>
+ <fluent-menu-item role="menuitemcheckbox"> Item 3 </fluent-menu-item>
+
+ <fluent-divider role="separator" aria-orientation="horizontal" orientation="horizontal"></fluent-divider>
+
+ <fluent-menu-item>Menu item 4</fluent-menu-item>
+ <fluent-menu-item>Menu item 5</fluent-menu-item>
+ <fluent-menu-item>Menu item 6</fluent-menu-item>
+
+ <fluent-menu-item>Menu item 7</fluent-menu-item>
+ <fluent-menu-item>Menu item 8</fluent-menu-item>
+ </fluent-menu-list>
+ </fluent-menu>
+ </div>
+`);

packages/web-components/src/menu/menu.ts

@@ -1,6 +1,8 @@
 import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
 import { keyEnter, keyEscape, keySpace, keyTab } from '@microsoft/fast-web-utilities';
 import { MenuList } from '../menu-list/menu-list.js';
+import { MenuItem } from '../menu-item/menu-item.js';
+import { MenuItemRole } from '../menu-item/menu-item.options.js';
 
 /**
  * A Menu component that provides a customizable menu element.
@@ -154,7 +156,16 @@ export class Menu extends FASTElement {
  * Closes the menu.
  * @public
  */
- public closeMenu = () => {
+ public closeMenu = (event?: Event) => {
+ // Keep menu open if the event target is a menu item checkbox or radio
+ if (
+ event?.target instanceof MenuItem &&
+ (event.target.getAttribute('role') === MenuItemRole.menuitemcheckbox ||
+ event.target.getAttribute('role') === MenuItemRole.menuitemradio)
+ ) {
+ return;
+ }
+
  this._menuList?.togglePopover(false);
 
  if (this.closeOnScroll) {
@@ -238,9 +249,9 @@ export class Menu extends FASTElement {
  */
  public persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void {
  if (!newValue) {
- this._menuList?.addEventListener('click', this.closeMenu);
+ this._menuList?.addEventListener('change', this.closeMenu);
  } else {
- this._menuList?.removeEventListener('click', this.closeMenu);
+ this._menuList?.removeEventListener('change', this.closeMenu);
  }
  }
 
@@ -288,7 +299,7 @@ export class Menu extends FASTElement {
  this._trigger?.addEventListener('keydown', this.triggerKeydownHandler);
 
  if (!this.persistOnItemClick) {
- this._menuList?.addEventListener('click', this.closeMenu);
+ this._menuList?.addEventListener('change', this.closeMenu);
  }
  if (this.openOnHover) {
  this._trigger?.addEventListener('mouseover', this.openMenu);
@@ -313,7 +324,7 @@ export class Menu extends FASTElement {
 
  this._trigger?.removeEventListener('keydown', this.triggerKeydownHandler);
  if (!this.persistOnItemClick) {
- this._menuList?.removeEventListener('click', this.closeMenu);
+ this._menuList?.removeEventListener('change', this.closeMenu);
  }
  if (this.openOnHover) {
  this._trigger?.removeEventListener('mouseover', this.openMenu);