p-dropdown: ExpressionChangedAfterItHasBeenCheckedError for 'p-inputwrapper-focus'

[ES-Six]

Hello PrimeNG,

Describe the bug

When I double click on a p-dropdown selector, the given error happened :

Screenshot on Stackblitz :

Stackblitz hosted demo joined to this issue.

Environment

Basic as possible, Angular + PrimeNG only

Reproducer

https://stackblitz.com/edit/angular-dndqap?file=src/main.ts

Angular version

15.2.0

PrimeNG version

15.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.15.1

Browser(s)

ALL

Steps to reproduce the behavior

1. Open the Stackblitz demo
2. Find the selector on the page and fast double click (faster as possible) multiple times on it (5 or more times)
3. Look at the console for the error

Expected behavior

No error on the console

Thanks for reading.

[ES-Six]

I think it's related to this part of the p-dropdown code :

Inside PrimeNG components/dropdown/dropdown.ts at line 273 : https://github.com/primefaces/primeng/blob/15.2.0/src/app/components/dropdown/dropdown.ts#L273

Code extract for PrimeNG components/dropdown/dropdown.ts at line 273 :

    host: {
        class: 'p-element p-inputwrapper',
        '[class.p-inputwrapper-filled]': 'filled',
        '[class.p-inputwrapper-focus]': 'focused || overlayVisible' <-- here
    },

A call to the Angular ChangeDetector when focused or overlayVisible are changed internally might be a solution to correct this issue.

[ES-Six]

Need triage, I suggest to mark this issue as bug, anyone ?

[jacqueslareau]

Hello, just to mention I also experience this bug with the autocomplete component. Might be the same thing.

[ES-Six]

Is primeng open to PR ?

[ES-Six]

Here is an updated stackblitz as this bug remains with the latest version of primeng and Angular 16.

https://stackblitz.com/edit/angular-abpgi6

Simply fast double click on a selector to trigger the error in the console...

Here is a demo video : Record_2023-07-13_17-58-57.webm

[ddotsdot]

It appears that there is a similar issue related to primeng/inputmask. When autofocus property is set to true, an ExpressionChangedAfterItHasBeenCheckedError is triggered.

I adapted @ES-Six's stackblitz example accordingly.

https://stackblitz.com/edit/angular-xkcwnv (If you don't see the error log on first load, press reload button)

Does anyone have a quick fix to that?

If [autoFocus]="false", there won't be any error.

PS: Feel free to move this comment to another issue if desired...

[ashikjs]

@ES-Six can you check it right now, I can not reproduce it .

[ES-Six]

@ES-Six can you check it right now, I can not reproduce it .

Hello @ashikjs ,

Yes, the bug is still here.

Here is an updated sample with the latest version of primeng and Angular 16 :

https://stackblitz.com/edit/angular-qqgbci

Here is a demo video :

Capture_video_du_2023-08-31_18-10-31.webm

I edited the stackblitz to make the bug easier to reproduce as it seems the error is easier to trigger when the selector contains a lot of values (let's say 150 values). The slower the selector is, the easier it is to trigger the error.

Just click fast 4 or 5 times on the selector in the stackblitz and the error will trigger in the browser console :

Additionally, you can trigger the bug by focusing the selector and keep pressing the space bar for about 3 seconds and the same error will spam the browser console :)

[sandeepagrawal-proto]

Hi, Any updates on this bug, please? I am looking for a permanent fix or workaround for this.

[xRino94]

+1

[pete4dev]

+1

[edipof]

+1