From f6e9de0e8f0c2dba14e5ab299becbc974917382f Mon Sep 17 00:00:00 2001 From: jeff smith Date: Fri, 11 Oct 2024 09:54:59 -0700 Subject: [PATCH 1/3] fix: menu-item emit current state in checked chnage event --- .../web-components/src/menu-item/menu-item.ts | 2 +- .../src/menu-list/menu-list.spec.ts | 65 +++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/web-components/src/menu-item/menu-item.ts b/packages/web-components/src/menu-item/menu-item.ts index 9e4ffb34bfb093..de751a9d6fffee 100644 --- a/packages/web-components/src/menu-item/menu-item.ts +++ b/packages/web-components/src/menu-item/menu-item.ts @@ -111,7 +111,7 @@ export class MenuItem extends FASTElement { toggleState(this.elementInternals, 'checked', checkableMenuItem ? next : false); if (this.$fastController.isConnected) { - this.$emit('change'); + this.$emit('change', next, { bubbles: true }); } } diff --git a/packages/web-components/src/menu-list/menu-list.spec.ts b/packages/web-components/src/menu-list/menu-list.spec.ts index d4dcf9cd0447e4..aea9ababab2c44 100644 --- a/packages/web-components/src/menu-list/menu-list.spec.ts +++ b/packages/web-components/src/menu-list/menu-list.spec.ts @@ -1,6 +1,8 @@ +import { once } from 'events'; import { test } from '@playwright/test'; import { expect, fixtureURL } from '../helpers.tests.js'; import { MenuItemRole } from '../menu-item/menu-item.options.js'; +import { MenuItem } from '../menu-item/menu-item.js'; test.describe('Menu', () => { test.beforeEach(async ({ page }) => { @@ -521,4 +523,67 @@ test.describe('Menu', () => { await expect(item).toHaveAttribute('data-indent', '2'); } }); + + test.describe('`change` event', () => { + test('should emit `change` event when `checked` property changed', async ({ page }) => { + const element = page.locator('fluent-menu-list'); + const menuItems = element.locator('fluent-menu-item'); + + await page.setContent(/* html */ ` + + Menu Item 1 + Menu item 2 + Menu item 3 + Menu item 4 + + `); + + const [wasChanged] = await Promise.all([ + menuItems.nth(0).evaluate( + node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })), + ), + menuItems.nth(0).evaluate((node: MenuItem) => { + node.checked = true; + }), + ]); + + expect(wasChanged).toEqual(true); + }); + + test('should emit change event when menu-item checked and unchecked', async ({ page }) => { + const element = page.locator('fluent-menu-list'); + const menuItems = element.locator('fluent-menu-item'); + + await page.setContent(/* html */ ` + + Menu Item 1 + Menu item 2 + Menu item 3 + Menu item 4 + + `); + + let wasChanged = menuItems.nth(0).evaluate((node: MenuItem) => { + return new Promise(resolve => { + node.addEventListener('change', (evt) => { + resolve((evt as any).detail) + }); + }); + }); + + await menuItems.nth(0).click(); + await expect(wasChanged).resolves.toBeTruthy(); + + wasChanged = menuItems.nth(0).evaluate((node: MenuItem) => { + return new Promise(resolve => { + node.addEventListener('change', (evt) => { + resolve((evt as any).detail) + }); + }); + }); + + await menuItems.nth(1).click(); + await expect(wasChanged).resolves.toBeFalsy(); + }); + }); }); From fcb800fe183a630ea094762313ea4c00d0c9c51c Mon Sep 17 00:00:00 2001 From: jeff smith Date: Fri, 11 Oct 2024 09:56:48 -0700 Subject: [PATCH 2/3] chnage file --- ...eb-components-32b505fd-a856-47b9-9639-f9ce57af0ce4.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-32b505fd-a856-47b9-9639-f9ce57af0ce4.json diff --git a/change/@fluentui-web-components-32b505fd-a856-47b9-9639-f9ce57af0ce4.json b/change/@fluentui-web-components-32b505fd-a856-47b9-9639-f9ce57af0ce4.json new file mode 100644 index 00000000000000..d1595ee34306dd --- /dev/null +++ b/change/@fluentui-web-components-32b505fd-a856-47b9-9639-f9ce57af0ce4.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fix: menu-item emit current state when checked change event fires", + "packageName": "@fluentui/web-components", + "email": "jes@microsoft.com", + "dependentChangeType": "patch" +} From 75d382f2eb51d03d9ad26ab6acbdf9e242d8b144 Mon Sep 17 00:00:00 2001 From: jeff smith Date: Mon, 14 Oct 2024 12:23:44 -0700 Subject: [PATCH 3/3] prettier --- .../src/menu-list/menu-list.spec.ts | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/web-components/src/menu-list/menu-list.spec.ts b/packages/web-components/src/menu-list/menu-list.spec.ts index aea9ababab2c44..c099c3138bce64 100644 --- a/packages/web-components/src/menu-list/menu-list.spec.ts +++ b/packages/web-components/src/menu-list/menu-list.spec.ts @@ -539,9 +539,11 @@ test.describe('Menu', () => { `); const [wasChanged] = await Promise.all([ - menuItems.nth(0).evaluate( - node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })), - ), + menuItems + .nth(0) + .evaluate( + node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })), + ), menuItems.nth(0).evaluate((node: MenuItem) => { node.checked = true; }), @@ -564,26 +566,26 @@ test.describe('Menu', () => { `); let wasChanged = menuItems.nth(0).evaluate((node: MenuItem) => { - return new Promise(resolve => { - node.addEventListener('change', (evt) => { - resolve((evt as any).detail) - }); + return new Promise(resolve => { + node.addEventListener('change', evt => { + resolve((evt as any).detail); }); + }); }); - await menuItems.nth(0).click(); - await expect(wasChanged).resolves.toBeTruthy(); + await menuItems.nth(0).click(); + await expect(wasChanged).resolves.toBeTruthy(); - wasChanged = menuItems.nth(0).evaluate((node: MenuItem) => { - return new Promise(resolve => { - node.addEventListener('change', (evt) => { - resolve((evt as any).detail) - }); + wasChanged = menuItems.nth(0).evaluate((node: MenuItem) => { + return new Promise(resolve => { + node.addEventListener('change', evt => { + resolve((evt as any).detail); }); + }); }); await menuItems.nth(1).click(); await expect(wasChanged).resolves.toBeFalsy(); }); - }); + }); });