Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

bug(aria/combobox): keys pressed back to back are lost; only the last one reaches the popup

Aperta Adatta ai principianti
  • Qualcosa non va?
#33,973 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
angular, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia dall’implementazione della combobox ARIA di Angular, in ComboboxPattern, dove, secondo l’issue, viene impostato keyboardEventRelay e successivamente ridistribuito al target del controllo popup. Segui il gestore dei tasti e l’effetto di relay, poi aggiungi o aggiorna un test unitario per diversi eventi ArrowDown consecutivi. Il lavoro è completato quando ogni evento viene gestito in ordine e tre pressioni spostano la selezione di tre opzioni.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

area: aria/combobox gemini-triaged
Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

While the popup is open, ComboboxPattern relays navigation and typeahead keys to the popup through a signal: the key handler does this.keyboardEventRelay.set(e), and an effect later re-dispatches the event on the popup's control target. If a second key arrives before the effect runs, the signal is overwritten and the first key is never relayed.

Effects:

  • Down, Down, Down pressed quickly moves the active option once.
  • Typeahead loses characters: with options item, item-2, item-3, typing item-3 with no delay between keys lands on item; with 60 ms between keys it lands on item-3.
  • Test automation and tools that send keys in a burst (and some assistive technology input) see wrong results. Seen in Chromium through Playwright, and in unit tests.

Related: #33361 (same relay signal, different symptom: a stale event replayed on reopen).

Reproduction
import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
import { Listbox, Option } from '@angular/aria/listbox';

@Component({
  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option],
  template: `
    <div ngCombobox #combobox="ngCombobox" tabindex="0">Pick one</div>
    <ng-template ngComboboxPopup [combobox]="combobox">
      <div ngListbox ngComboboxWidget #listbox="ngListbox" focusMode="activedescendant"
        [activeDescendant]="listbox.activeDescendant()">
        @for (o of options; track o) {
          <div ngOption [value]="o" [label]="o">{{ o }}</div>
        }
      </div>
    </ng-template>
  `,
})
class Repro {
  options = ['alpha', 'bravo', 'charlie', 'delta'];
}

const key = (el: Element, k: string) =>
  el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true }));

it('handles each key pressed back to back', async () => {
  const fixture = TestBed.createComponent(Repro);
  await fixture.whenStable();
  const combobox = fixture.nativeElement.querySelector('[ngCombobox]');
  combobox.focus();
  key(combobox, 'ArrowDown');            // open
  await fixture.whenStable();
  key(combobox, 'Home');
  await fixture.whenStable();
  key(combobox, 'ArrowDown');
  key(combobox, 'ArrowDown');
  key(combobox, 'ArrowDown');
  await fixture.whenStable();
  const id = combobox.getAttribute('aria-activedescendant');
  expect(fixture.nativeElement.querySelector(`[id="${id}"]`).textContent.trim())
    .toBe('delta');                       // actual: 'bravo'
});
Expected Behavior

Each key event is handled, in order. Three Down presses move three options.

Actual Behavior

Only the last key since the effect last ran is relayed. Three Down presses move one option ("bravo" in place of "delta").

A possible fix: relay each event synchronously from the key handler (or queue them), not through a single-value signal.

Environment
  • Angular: 22.2.1
  • CDK/Material: @angular/cdk 22.2.3, @angular/aria 22.2.3 (also in 22.3.0-next.2 and main)
  • Browser(s): Chromium (Playwright); Vitest with happy-dom
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 5h
PR unite (30g)
67

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/components

Tutte le issue di angular/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.