Skip to content

feat-bug(aria/combobox-listbox): Listbox removes values not present in the options list #33396

@baptistemoreau14

Description

@baptistemoreau14

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

The component has an undocumented behavior: it automatically removes any value that is not present in the provided options list.

This creates problems when building an autocomplete component backed by a partial dataset (for example, paginated results from a backend service), where some values may already be selected but are not included in the currently loaded options.

It would be helpful to provide a configuration option to enable or disable this behavior. For backward compatibility, the default value should preserve the current behavior.
The behavior logic in the component :

// Ensure that the value is always in sync with the available options.
// This needs to be after the render for the value to always be available.
afterRenderEffect({
write: () => {
const items = inputs.items();
const value = untracked(() => this.value());
if (items && value.some(v => !items.some(i => i.value() === v))) {
this.value.set(value.filter(v => items.some(i => i.value() === v)));
}
},
});

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-wpwvn4fs?file=src%2Fcombobox%2Fcombobox.html
Steps to reproduce:

  1. Click on either input field to open the dropdown (no selection or typing required).
  2. In the first example, notice that the selected values remain unchanged.
  3. In the second example, notice that only the values present in the current options list are kept; all other selected values are removed.

Expected Behavior

When the component is initialized with a set of selected values that are not present in the provided options list (including when the options list is empty), it should preserve those values and should not emit any value changes until a user interaction occurs.

Actual Behavior

When the component is initialized with selected values that are not present in the provided options list (including when the options list is empty), it emits a value change event and automatically removes any selected values that are not part of the current options list.

Environment

Angular CLI : 22.0.1
Angular : 22.0.1
Node.js : 22.22.3
Package Manager : npm 10.8.2
Operating System : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations │ 22.0.1 │ ^22.0.0 │
│ @angular/aria │ 22.0.1 │ ^22.0.0 │
│ @angular/build │ 22.0.1 │ ^22.0.0 │
│ @angular/cli │ 22.0.1 │ ^22.0.0 │
│ @angular/common │ 22.0.1 │ ^22.0.0 │
│ @angular/compiler │ 22.0.1 │ ^22.0.0 │
│ @angular/compiler-cli │ 22.0.1 │ ^22.0.0 │
│ @angular/core │ 22.0.1 │ ^22.0.0 │
│ @angular/forms │ 22.0.1 │ ^22.0.0 │
│ @angular/platform-browser │ 22.0.1 │ ^22.0.0 │
│ @angular/router │ 22.0.1 │ ^22.0.0 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 6.0.3 │ ^6.0 │
│ zone.js │ 0.15.0 │ ~0.15.0 │
└───────────────────────────┴───────────────────┴───────────────────┘

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: aria/comboboxgemini-triagedLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions