angular / angular/components

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

Abierto
#32,658 5 comentarios 1 reacción 1 asignado Reclamado por @ok7sai Ver en GitHub
area: aria/combobox P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.