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

bug(aria/combobox): `filterMode="auto-select"` returns old value

Aperta
  • Qualcosa non va?
#32,658 5 commenti 1 reazione 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@ok7sai ci sta già lavorando.

Dal 1/4/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

area: aria/combobox P3
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

angular/aria combobox with multi false, readonly false and filterMode="auto-select" returns old selected value.

If now we have AAA as selected but then we select BBB and hit Enter key -> we mustn't see AAA. Because we select another (BBB) value and approve it by Enter.

values():
<div>{{ listbox()?.values() | json }}</div>

<div ngCombobox [filterMode]="filterMode()" [readonly]="false">
  <div #origin class="autocomplete">
    <span
      class="search-icon material-symbols-outlined"
      translate="no"
      aria-hidden="true"
      >search</span
    >
    <input
      aria-label="Label dropdown"
      placeholder="Select a country"
      [(ngModel)]="query"
      ngComboboxInput
    />
  </div>
  <ng-template ngComboboxPopupContainer>
    <ng-template
      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
      [cdkConnectedOverlayOpen]="true"
    >
      <div class="popup">
        @if (countries().length === 0) {
        <div class="no-results">No results found</div>
        }
        <div ngListbox [multi]="false">
          @for (country of countries(); track country) {
          <div ngOption [value]="country" [label]="country">
            <span class="option-label">{{ country }}</span>
            <span
              class="check-icon material-symbols-outlined"
              translate="no"
              aria-hidden="true"
              >check</span
            >
          </div>
          }
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>

import {
  Combobox,
  ComboboxInput,
  ComboboxPopupContainer,
} from '@angular/aria/combobox';
import { Listbox, Option } from '@angular/aria/listbox';
import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  signal,
  viewChild,
  viewChildren,
} from '@angular/core';
import { FormsModule } from '@angular/forms';

const ALL_COUNTRIES = ['AAA', 'BBB', 'CCC', 'DDD'];

@Component({
  selector: 'CustomCombobox',
  templateUrl: 'combobox.html',
  styleUrl: './combobox.scss',
  imports: [
    CommonModule,
    Combobox,
    ComboboxInput,
    ComboboxPopupContainer,
    Listbox,
    Option,
    OverlayModule,
    FormsModule,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomCombobox {
  public filterMode = input.required<'manual' | 'auto-select' | 'highlight'>();

  /** The combobox listbox popup. */
  listbox = viewChild<Listbox<string>>(Listbox);
  /** The options available in the listbox. */
  options = viewChildren<Option<string>>(Option);
  /** A reference to the ng aria combobox. */
  combobox = viewChild<Combobox<string>>(Combobox);
  /** The query string used to filter the list of countries. */
  query = signal('');
  /** The list of countries filtered by the query. */
  countries = computed(() =>
    ALL_COUNTRIES.filter((country) =>
      country.toLowerCase().startsWith(this.query().toLowerCase())
    )
  );
  constructor() {
  }
}
Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-gopytywj?file=src%2Fmain.ts,src%2Fcombobox%2Fcombobox.html

Steps to reproduce:

  1. type aaa -> values() are ["AAA"]
  2. remove input value
  3. Now: empty input and values(). Use arrow up/down keys to select BBB, CCC or DDD. Not AAA
  4. hit Enter key
  5. But values() are ["AAA"] again
Expected Behavior

We select BBB and hit Enter key -> we must see BBB, not AAA.

Actual Behavior

We select BBB, CCC, DDD and hit Enter key -> we see previous value: AAA

Environment
  • Angular: 21.0.3 and later
  • angular/aria: 21.0.2 - 21.2.0-next.0
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
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.