Description
Description
When the application is running in a zoneless change detection environment, the DropDown component throws an ExpressionChangedAfterItHasBeenCheckedError when an item is selected and the dropdown is scrolled.
The error is related to the aria-activedescendant attribute. The DropDown initially has an active descendant value, but the value changes to null after Angular has already checked the expression:
_effect-chunk2.mjs:2601 ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'attr.aria-activedescendant': 'igx-drop-down-item-1'. Current value: 'null'. Expression location: _DropDownVirtualComponent component.
This type of error is typically caused by a value being updated after Angular’s change detection check has completed. In this case, it appears to be connected to the DropDown updating its active item / ARIA active descendant state outside of the expected change detection flow in a zoneless environment.
I have created a sample that reproduces the behavior:
https://stackblitz.com/edit/1fvtkgm9?file=src%2Fapp%2Fapp.component.ts
Framework
Angular
Angular Version
21.2
Ignite UI for Angular Version
21.2.0
Component / Area
Drop Down
Browser
Chrome
Operating System
Windows
Command Not Working
Steps to Reproduce
- Open the following sample: https://stackblitz.com/edit/1fvtkgm9?file=src%2Fapp%2Fapp.component.ts
- Select an item from the DropDown.
- Scroll the DropDown list.
- Observe the browser console.
Actual Result
The DropDown throws an ExpressionChangedAfterItHasBeenCheckedError related to the aria-activedescendant attribute:
Previous value for 'attr.aria-activedescendant': 'igx-drop-down-item-1'. Current value: 'null'.
Expected Result
The DropDown should handle item selection and scrolling correctly without throwing an ExpressionChangedAfterItHasBeenCheckedError in a zoneless change detection environment.
Reproduction URL
https://stackblitz.com/edit/1fvtkgm9?file=src%2Fapp%2Fapp.component.ts
Attachments
Description
Description
When the application is running in a zoneless change detection environment, the DropDown component throws an
ExpressionChangedAfterItHasBeenCheckedErrorwhen an item is selected and the dropdown is scrolled.The error is related to the
aria-activedescendantattribute. The DropDown initially has an active descendant value, but the value changes tonullafter Angular has already checked the expression:This type of error is typically caused by a value being updated after Angular’s change detection check has completed. In this case, it appears to be connected to the DropDown updating its active item / ARIA active descendant state outside of the expected change detection flow in a zoneless environment.
I have created a sample that reproduces the behavior:
https://stackblitz.com/edit/1fvtkgm9?file=src%2Fapp%2Fapp.component.ts
Framework
Angular
Angular Version
21.2
Ignite UI for Angular Version
21.2.0
Component / Area
Drop Down
Browser
Chrome
Operating System
Windows
Command Not Working
Steps to Reproduce
Actual Result
The DropDown throws an ExpressionChangedAfterItHasBeenCheckedError related to the aria-activedescendant attribute:
Expected Result
The DropDown should handle item selection and scrolling correctly without throwing an
ExpressionChangedAfterItHasBeenCheckedErrorin a zoneless change detection environment.Reproduction URL
https://stackblitz.com/edit/1fvtkgm9?file=src%2Fapp%2Fapp.component.ts
Attachments