[fix]: remove unnecessary filtering in menu-item (#33795)

Author: eljefe223

change/@fluentui-web-components-bd877b00-0d8e-4274-aa43-b5f748e419c2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "remove unnecessary filtering in menu-item",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -2,7 +2,7 @@ import type { ElementViewTemplate } from '@microsoft/fast-element';
 import { html, slotted } from '@microsoft/fast-element';
 import { staticallyCompose } from '../utils/template-helpers.js';
 import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
-import { menuFilter, type MenuItem, type MenuItemOptions } from './menu-item.js';
+import type { MenuItem, MenuItemOptions } from './menu-item.js';
 
 const Checkmark16Filled = html.partial(
   `<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`,
@@ -27,7 +27,7 @@ export function menuItemTemplate<T extends MenuItem>(options: MenuItemOptions =
       </div>
       ${endSlotTemplate(options)}
       <slot name="submenu-glyph"> ${staticallyCompose(options.submenuGlyph)} </slot>
-      <slot name="submenu" ${slotted({ property: 'slottedSubmenu', filter: menuFilter() })}></slot>
+      <slot name="submenu" ${slotted({ property: 'slottedSubmenu' })}></slot>
     </template>
   `;
 }

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

@@ -1,6 +1,5 @@
-import { attr, type ElementsFilter, FASTElement, observable } from '@microsoft/fast-element';
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
 import { keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
-import type { MenuList } from '../menu-list/menu-list.js';
 import type { StartEndOptions } from '../patterns/start-end.js';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
@@ -21,13 +20,6 @@ export type MenuItemOptions = StartEndOptions<MenuItem> & {
   submenuGlyph?: StaticallyComposableHTML<MenuItem>;
 };
 
-/**
- * Creates a function that can be used to filter a Node array, selecting only elements with elementInternals role of "menu".
- * @public
- */
-export const menuFilter = (): ElementsFilter => value =>
-  value.nodeType === 1 && (value as MenuList).elementInternals.role === 'menu';
-
 /**
  * A Switch Custom HTML Element.
  * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.

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

@@ -174,6 +174,44 @@ test.describe('Menu', () => {
     await expect(menuList).toBeVisible();
   });
 
+  test('should set popover attribute on slotted submenu', async ({ fastPage }) => {
+    const { element } = fastPage;
+
+    const menuButton = element.locator('fluent-menu-button');
+    const menuList = element.locator('fluent-menu-list:not([slot])');
+    const menuItems = menuList.locator('fluent-menu-item');
+
+    const submenuList = element.locator('fluent-menu-list[slot="submenu"]');
+
+    await fastPage.setTemplate({
+      innerHTML: /* html */ `
+        <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
+        <fluent-menu-list>
+          <fluent-menu-item>
+            Menu 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-item> Subitem 3 </fluent-menu-item>
+            </fluent-menu-list>
+          </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>
+      `,
+    });
+
+    await menuButton.click();
+
+    await menuItems.first().focus();
+
+    await element.press('ArrowRight');
+
+    await expect(submenuList).toBeVisible();
+    await expect(submenuList).toHaveAttribute('popover');
+  });
+
   test('should focus the first item when a submenu is closed', async ({ fastPage }) => {
     const { element } = fastPage;