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

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'
});