angular / angular/components

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

Đang mở
#32,658 5 bình luận 1 reaction 1 người được giao Được @ok7sai nhận Xem trên GitHub
area: aria/combobox P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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():

{{ listbox()?.values() | json }}



search








```

```
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);
/** The options available in the listbox. */
options = viewChildren>(Option);
/** A reference to the ng aria combobox. */
combobox = viewChild>(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):

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

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

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.