Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte Adaptée aux débutants
#33,973 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
angular, typescript

Piste de recherche

Commencez dans l’implémentation de la combobox ARIA d’Angular, au niveau de ComboboxPattern, où, d’après l’issue, keyboardEventRelay est défini puis redispatché vers la cible du contrôle du popup. Suivez le gestionnaire de touches et l’effet de relais, puis ajoutez ou mettez à jour un test unitaire couvrant plusieurs événements ArrowDown consécutifs. Le travail est terminé lorsque chaque événement est traité dans l’ordre et que trois pressions font avancer de trois options.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 5 h
PR mergées (30 j)
67

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/components

Toutes les issues de angular/components

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.