Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#32,658 5 bình luận 1 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@ok7sai đang làm issue này rồi.

Từ ngày 1/4/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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):
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 5 giờ
Pull request đã merge (30 ngày)
67

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/components

Tất cả issue của angular/components

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.