BlockUI does not unblock blockable-div after blocking.

[Sothecom]

Describe the bug

I set simple p-blockUI which targets a simple blockable-div (which implements BlockableUI).
There are also 2 buttons which set a boolean value to the [locked] property of the p-blockUI.
When I click to block, the overlay is applied as expected.
However when I click to unblock, I get the console error
"ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node"
On inspection of the DOM elements, it looks like the overlay div, with display: none, nestled under the p-blockUI on load.
After blocking is triggered, the overlay div appears to be moved to under the blockable-div.
It looks as if when I want to unblock, the overlay div is being searched for in it's original location ...where it no longer is.
The above is a simplified example of what is happening on a Live application.

Environment

Windows 10 Enterprise
64-bit operating system, x64-based processor

Reproducer

https://github-rnckdv.stackblitz.io

Angular version

17.2.0

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Edge 120.0.2210.121 (Official build) (64-bit), Chrome Version 120.0.6099.225 (Official Build) (64-bit)

Steps to reproduce the behavior

Issue is shown in Stackblitz (Component Parent1 and BlockabledIV).
However, this what it looks liKe locally...

Then on unblocking, I get...

NB: The issue happens with or without the textfield.

Just for quick reference, this is the relevant bit of the code...

Expected behavior

[Sothecom]

Hi Guys, just wondering if any updates on this issue. Kind Regards, Roland @ Sothecom

[Sothecom]

Hello All, hope all is well. Just checking for any updates. Thanks Roland

[jbkly]

I'm also experiencing this bug after updating PrimeNG, are there any updates or workarounds? Thanks @Sothecom @mehmetcetin01140

It's not just the console error, the overlay fails to be removed

[SergeyGor85]

Hi! @jbkly @Sothecom @mehmetcetin01140 I had similar issue after updating PrimeNG, but I imported BrowserAnimationsModule, the issue is gone.

[shaman-apprentice]

I had the same issue. I use Angular's v17+ provideAnimationsAsync in ApplicationConfig. Using the synchron version from import { provideAnimations } from '@angular/platform-browser/animations'; instead fixed it for me.

I would appreciate a fix, so that it works with async version as well.

[Sothecom]

Hi! @jbkly @Sothecom @mehmetcetin01140 I had similar issue after updating PrimeNG, but I imported BrowserAnimationsModule, the issue is gone.

Thanks @SergeyGor85 This worked.
NB: For Standalone components (ie no modules), you'll need to add the import to the app.config.ts
providers: [provideRouter(routes), importProvidersFrom(BrowserAnimationsModule),]

[Sothecom]

I had the same issue. I use Angular's v17+ provideAnimationsAsync in ApplicationConfig. Using the synchron version from import { provideAnimations } from '@angular/platform-browser/animations'; instead fixed it for me.

I would appreciate a fix, so that it works with async version as well.

Thanks @shaman-apprentice This also works and does seem a cleaner solution, even before the async version

[gschafra]

I'm experiencing this problem in an Angular v16 project using PrimeNG LTS v16.9.11-LTS. Really annoying....

[itx-niklas-baugatz]

In our case there where missing styles causing the blockui to not unblock

.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}

@Keyframes p-component-overlay-leave-animation {
from {
background-color: rgba(0, 0, 0, 0.4);
}
to {
background-color: transparent;
}
}

[Sothecom]

Hi Team,
Please note the workarounds given above have unexpected behaviours with PrimeNg controls e.g. dropdowns not collapsing after selection.
So please definitely keep it on the ToDo list.

[MisooB]

In our case there where missing styles causing the blockui to not unblock

.p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; }

@Keyframes p-component-overlay-leave-animation { from { background-color: rgba(0, 0, 0, 0.4); } to { background-color: transparent; } }

Thank you, using primeng 17.18.9 and this is the only thing that helped. 🥳

[diego-rapoport]

In our case there where missing styles causing the blockui to not unblock

.p-component-overlay-leave { animation: p-component-overlay-leave-animation 150ms forwards; }

@Keyframes p-component-overlay-leave-animation { from { background-color: rgba(0, 0, 0, 0.4); } to { background-color: transparent; } }

Thank you so much!! That solved my problem as well.