angular / angular/components

bug(aria/listbox): selection state breaks when used with ngCombobox autocomplete (readonly=false)

Open
#32,712 1 comment 2 reactions 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

## Selection state breaks with autocomplete and readonly set to false

When using ngListbox in multi mode inside an ngCombobox with autocomplete enabled (filterMode="manual" and readonly=false), the listbox selection state becomes inconsistent.

### Important:
This issue does not occur when the combobox is set to readonly=true.

### Video

https://github.com/user-attachments/assets/4fb98448-69a6-491a-acd8-5912375a7a3e

### Reproduction

**StackBlitz link:** https://stackblitz.com/edit/stackblitz-starters-tzi9ff2a?file=src%2Fcombobox%2Fcombobox.html

**Steps to reproduce:**
1. Create an ngCombobox with:
a) filterMode="manual"
b) default editable input (readonly=false)
4. Render an ngListbox with multi enabled inside the combobox popup
5. Select options sequentially from the list
6. Observe listbox()?.values() after each selection ` listbox = viewChild>(Listbox);`

### Expected Behavior

## ngListbox in multi mode should

- preserve all selected values
- never reset selection unless explicitly cleared
- Combobox autocomplete input updates should not override or reset
- listbox multi-selection

### Actual Behavior

## Selection behavior is deterministic but incorrect

### Every second selection

- listbox()?.values() resets to an empty array
- The combobox input value remains unchanged

### Every third selection

The selected option becomes:

- the combobox input value
- the only value in listbox()?.values()
- This cycle repeats and makes listbox()?.values() unreliable for multi-selection state.

### Environment

- Angular:
- CDK/Material:
- 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.