Skip to content

fix: restore menu list keyboard navigation after reconnect - #36871

Open
aseeb shibin (asxxb) wants to merge 1 commit into
microsoft:masterfrom
asxxb:fix/menu-list-focusgroup-reconnect
Open

aseeb shibin (asxxb) wants to merge 1 commit into
microsoft:masterfrom
asxxb:fix/menu-list-focusgroup-reconnect

Conversation

@asxxb

Copy link
Copy Markdown

Previous Behavior

When a fluent-menu-list element was removed from the DOM and reinserted, its FocusGroup instance remained referenced after being disconnected. As a result, arrow-key navigation could stop working in Firefox and Safari.

New Behavior

Clear the existing FocusGroup reference when MenuList disconnects, allowing a new instance to be created when the element reconnects.

Add a regression test to verify that arrow-key navigation continues working after the menu list is moved in the DOM.

Related Issue(s)

@asxxb
aseeb shibin (asxxb) requested a review from a team as a code owner October 12, 2026 23:23
@asxxb

Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

@marchbox

Copy link
Copy Markdown
Contributor

aseeb shibin (@asxxb) Please run yarn change in root to add a change file

@github-actions

Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -78,6 +78,36 @@ test.describe('MenuList', () => {
await expect(firstItem).toBeFocused();

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/Accordion 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png 3398 Changed
vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed
vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 443 Changed
vr-tests-web-components/MenuList 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.1st selected.chromium_2.png 39384 Changed
vr-tests-web-components/MenuList. - RTL.normal.chromium_1.png 39083 Changed
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium_3.png 38816 Changed
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 288 Changed

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@fluentui/web-components: fluent-menu-list loses its arrow keys after it is moved in the DOM (Firefox, Safari)

2 participants