primefaces
p-sidebar/p-overlay: Change detection issues when closing sidebar and sub component has p-overlay visible
Describe the bug
When components utilizing p-overlay (multi-select for example) are opened (p-overlay visible) inside of a sidebar component, angular registers change detection issues when the sidebar is closed with the overlay open. This is probably due to the sidebar content area is being closed as the sub component is trying to close it's p-overlay (from blur). I've also noticed this issue when you try to open a component using p-overlay in quick succession (being closed before finished opening and vice versa). I imagine this all stems from a) having animations on the windows so they don't close immediately and b) not checking for changes while animations are active and the p-overlay visibility changes or when a parent component affects its visibility.
Environment
Angular 16.9.8 Chrome 124.0.6367.93
Reproducer
No response
Angular version
16.2.12
PrimeNG version
16.9.8
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
18.19.1
Browser(s)
Chrome 124.0.6367.93
Steps to reproduce the behavior
- Open multi-select overlay window inside of a sidebar
- Close the sidebar with the multi-select overlay open
- Notice change detection error reported for Overlay component Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. Expression location: Overlay component.
Also..
- Repeatedly open a dropdown in quick succession (I think it's easier to reproduce with a dropdown) by clicking the dropdown icon
- Notice change detection error reported for the component Dropdown: Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'attr.aria-expanded': 'false'. Current value: 'true'. Expression location: Dropdown component.
Expected behavior
Changed detection errors are not reported.
