Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#32,658 5 comentários 1 reação 1 responsável Ver no GitHub

Mantenedores costumam responder em até 1 dia

@ok7sai já está trabalhando nisso.

Desde 1/4/2026.

Avaliação

Esta issue ainda não foi avaliada.

Descrição

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):
Linguagem predominante
TypeScript
Estrelas
25k
Forks
6.8k
Merge médio
1d 5h
PRs com merge (30d)
67

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/components

Todas as issues de angular/components

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.