angular / angular/components

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

Open
#32,658 5 comments 1 reaction 1 assignee Claimed by @ok7sai View on GitHub
area: aria/combobox P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.