TypeError: Cannot read properties of undefined (reading 'classList') at Function.addClass

[LorenzSLA]

Hello everybody,

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://github.com/LorenzSchl/primeng-classlist-null-example
For some reason the error does not show in stackblitz. For me it only "works" or better fails with ng serve and chrome.

Current behavior
The following error is thrown:

core.js:6498 ERROR TypeError: Cannot read properties of null (reading 'classList')
    at Function.addClass (primeng-dom.js:12)
    at Dialog.onAnimationStart (primeng-dialog.js:477)
    at Dialog_div_0_div_1_Template_div_animation_animation_start_0_listener (primeng-dialog.js:542)
    at executeListenerWithErrorHandling (core.js:15327)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15365)
    at animations.js:198
    at Array.forEach (<anonymous>)
    at animations.js:196
    at ZoneDelegate.invoke (zone.js:372)
    at Object.onInvoke (core.js:28692)

Expected behavior
No error to be thrown.

Minimal reproduction of the problem with instructions
Hard to repoduce. If the dialog is openend, closed, repoened while closing animation is still running (after onAnimationStart and before onAnimationEnd) and closed after the onAnimationEnd. The wrapper will already have been nulled but the onAnimationStart(fromStage: visible, toStage: void) will try to add a class to the wrapper.

What is the motivation / use case for changing the behavior?
The bug was introduced in the following commit: 5365533

Please tell us about your environment:
Windows 10 Version 1909 (Build 18363.1916), IntelliJ IDEA 2021.2, NPM 8.1.0

• Angular version: 12.2.13
• PrimeNG version: 12.2.2
• Browser: [Chrome 96.0.4664.45]
• Language: [TypeScript 4.3.5]
• Node (for AoT issues): node --version = v16.13.0

[ludopak]

@LorenzSLA I added a comment to your fix, I think the same fix should be done in dialog.ts file.
What do you think?

[LorenzSLA]

@LorenzSLA I added a comment to your fix, I think the same fix should be done in dialog.ts file. What do you think?

I updated the PR. Thanks :)

[ludopak]

@yigitfindikli Will this kind of fixes be included in previous release? 12.2.4 for example?
I ask to know if we need to find a solution to fix it in another way in our application :)

[LorenzSLA]

@yigitfindikli Will this kind of fixes be included in previous release? 12.2.4 for example? I ask to know if we need to find a solution to fix it in another way in our application :)

Until the fix is added to PrimeNG and we were able to update, we added the following option to work around the issue:

[transitionOptions]="'0ms'"

[yigitfindikli]

Hi @ludopak am=nd @LorenzSLA,

V12 community support is over. But will be added to v12-lts.

Regards.