Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#36,869 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@asxxb is already working on this.

Since Oct 12, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript, web-dev
Domain
accessibility, frontend

Research direction

The issue identifies the behavior in menu-list.js: disconnectedCallback() disconnects the focus group, while setItems() reuses it after reconnection. Read those methods and the focus group lifecycle described in the issue, then reproduce the DOM move in Firefox or Safari. Done when ArrowDown moves focus through the menu items after the move, as it does without the move.

Written by the indexing model from the issue text.

Description

Version: @fluentui/web-components 3.1.3, @microsoft/focusgroup-polyfill 1.6.0. Engines: Firefox 153 and WebKit 26.6 (Playwright's builds) fail; Chromium 153 passes, because it has native focusgroup and the polyfill stands aside.

Summary

A fluent-menu-list builds its focus group (the polyfill that gives the arrow keys in an engine without native focusgroup) on its first setItems(), disconnects it when the list leaves the document, and never builds another. Any DOM move, which disconnects and reconnects the element (for example insertBefore, or a framework reordering a list), leaves a menu whose arrow keys do nothing: focus stays on the first item, so Enter chooses the first item whatever the user wanted.

Reproduction
<!doctype html>
<div id="host">
  <fluent-menu>
    <fluent-button slot="trigger">Actions</fluent-button>
    <fluent-menu-list>
      <fluent-menu-item>One</fluent-menu-item>
      <fluent-menu-item>Two</fluent-menu-item>
      <fluent-menu-item>Three</fluent-menu-item>
    </fluent-menu-list>
  </fluent-menu>
</div>
<script type="module">
  import '@fluentui/web-components/button.js';
  import '@fluentui/web-components/menu.js';
  import '@fluentui/web-components/menu-list.js';
  import '@fluentui/web-components/menu-item.js';
  // Move the menu in place once, as a framework's reorder would.
  const menu = document.querySelector('fluent-menu');
  customElements.whenDefined('fluent-menu-list').then(() => menu.parentElement.insertBefore(menu, menu.nextSibling));
</script>
  1. Open the page in Firefox or Safari. Tab to "Actions" and press Enter: the menu opens with focus on "One".
  2. Press ArrowDown twice.
  3. Expected: focus on "Three" (as without the move, and as in Chrome). Actual: focus stays on "One".

The standalone page above reproduces it as written (bundled with esbuild, served to each engine): never moved, "One", "Two", "Three" in all three engines; moved in place once, "One", "Two", "Three" in Chromium and "One", "One", "One" in Firefox and WebKit.

Cause
  • node_modules/@fluentui/web-components/dist/esm/menu-list/menu-list.js:15-18: disconnectedCallback() calls this.fg?.disconnect(), and keeps this.fg.
  • menu-list.js:19-34: setItems() creates the FocusGroup only if (!this.fg); otherwise it calls this.fg.update().
  • node_modules/@microsoft/focusgroup-polyfill/build/focusgroup-shadowless.mjs:101-114: the constructor adds the keydown, focusin and focusout listeners, once; :127-132: disconnect() aborts them and sets the owner to null; update() returns at once when there is no owner (:146).

So after a reconnection setItems() "updates" a disconnected group, which does nothing.

Suggested fix

Drop the group when disconnecting (this.fg?.disconnect(); this.fg = undefined;), so the next setItems() builds a new one; or build the group in connectedCallback.

Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 6h
Merged PRs (30d)
72

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui

All issues in microsoft/fluentui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.