Is this a regression?
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:
- Click on either input field to open the dropdown (no selection or typing required).
- In the first example, notice that the selected values remain unchanged.
- 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 │
└───────────────────────────┴───────────────────┴───────────────────┘
Is this a regression?
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 :
components/src/aria/listbox/listbox.ts
Lines 187 to 198 in b4a0956
Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-wpwvn4fs?file=src%2Fcombobox%2Fcombobox.html
Steps to reproduce:
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 │
└───────────────────────────┴───────────────────┴───────────────────┘