diff --git a/change/@fluentui-web-components-0c22cad8-1535-4970-b928-3554886f412f.json b/change/@fluentui-web-components-0c22cad8-1535-4970-b928-3554886f412f.json new file mode 100644 index 00000000000000..11a7357fc67675 --- /dev/null +++ b/change/@fluentui-web-components-0c22cad8-1535-4970-b928-3554886f412f.json @@ -0,0 +1,6 @@ +{ + "type": "patch", + "comment": "fix: restore menu list keyboard navigation after reconnect", + "packageName": "@fluentui/web-components", + "email": "aseebshibin4@gmail.com" +} 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 27206f1f1e4ab1..4ede893f8633a9 100644 --- a/packages/web-components/src/menu-list/menu-list.spec.ts +++ b/packages/web-components/src/menu-list/menu-list.spec.ts @@ -78,6 +78,36 @@ test.describe('MenuList', () => { await expect(firstItem).toBeFocused(); }); + test('should preserve arrow key navigation after being moved in the DOM', async ({ fastPage }) => { + const { element } = fastPage; + const menuItems = element.locator(MenuItemTagName); + + await fastPage.setTemplate(); + + // Move the menu list to trigger its disconnect/reconnect lifecycle. + await element.evaluate(node => { + const parent = node.parentElement; + + if (!parent) { + throw new Error('Menu list must have a parent element'); + } + + const nextSibling = node.nextSibling; + node.remove(); + parent.insertBefore(node, nextSibling); + }); + + await element.evaluate(node => { + node.focus(); + }); + + await expect(menuItems.first()).toBeFocused(); + + await element.press('ArrowDown'); + + await expect(menuItems.nth(1)).toBeFocused(); + }); + test('should focus before the queued item refresh completes', async ({ fastPage, page }) => { await fastPage.setTemplate(''); await page.evaluate( diff --git a/packages/web-components/src/menu-list/menu-list.ts b/packages/web-components/src/menu-list/menu-list.ts index 76dae478d0da80..234850d94d3805 100644 --- a/packages/web-components/src/menu-list/menu-list.ts +++ b/packages/web-components/src/menu-list/menu-list.ts @@ -20,6 +20,7 @@ export class MenuList extends BaseMenuList { disconnectedCallback() { this.fg?.disconnect(); + this.fg = undefined; super.disconnectedCallback(); }