Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#36,869 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@asxxb ya está trabajando en esto.

Desde el 12/10/2026.

  • #36871 de @asxxb — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
84/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript, web-dev
Área
accessibility, frontend

Línea de trabajo

El issue identifica el comportamiento en menu-list.js: disconnectedCallback() desconecta el grupo de foco, mientras que setItems() lo reutiliza después de la reconexión. Lee esos métodos y el ciclo de vida del grupo de foco descrito en el issue y, después, reproduce el movimiento del DOM en Firefox o Safari. El trabajo estará terminado cuando ArrowDown mueva el foco por los elementos del menú después del movimiento, igual que lo hace sin el movimiento.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
20.3k
Forks
2.9k
Merge medio
2 d 9 h
PR fusionados (30 d)
67

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/fluentui

Todos los issues de microsoft/fluentui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.