Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭
  • 哪里不对？
#32,658 5 条评论 1 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 1 天内回复

@ok7sai 已经在做这个了。

开始于 2026年4月1日。

评估

这个 Issue 还没有评估数据。

描述

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):
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 5 小时
30 天内合并 PR
67

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

查看 angular/components 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。