BlockUI: Mask is not applied when blocked changes rapidly

[MateuszBogdan]

Describe the bug

Issue occurs when block panel input blocked changes from false to true while css transition is still being applied. Issue replication in attached stackblitz.

Expected result:
Whole document is under mask after 20 ms, since blocked variable is true

Observed result:
No mask is being shown

Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.1.1
Node: 16.14.0
Package Manager: npm 8.17.0
OS: win32 x64

Angular: 14.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.1
@angular-devkit/build-angular   14.1.1
@angular-devkit/core            14.1.1
@angular-devkit/schematics      14.1.1
@schematics/angular             14.1.1
rxjs                            7.5.6
typescript                      4.7.4

Package versions:
"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primeng": "^14.0.1",

Reproducer

https://stackblitz.com/edit/github-7bew7n?file=src/app/app.component.ts

Angular version

14.1.1

PrimeNG version

14.0.1

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

16.14.0

Browser(s)

Edge 104.0.1293.54

Steps to reproduce the behavior

1. Open attached stackblitz page and load application and wait for setTimeout to finish

Expected behavior

Mask should be visible (blocked variable is true).

You can see it is correlated with transitions since changing numeric values for settimeout to: 1000 and 2000 makes issue go away.

[MateuszBogdan]

I have a quick working workaround for the issue.
Extending block method with additional check at the beginning seems to help. Workaround is not ideal and not extensively tested.

This is my monkey patching code. To work include it before first use of BlockUI (ex. ngOnInit in AppComponent):

    let originalBlock = BlockUI.prototype.block;
    BlockUI.prototype.block = function() {
      if (this._blocked && this.animationEndListener) {
        this.unbindAnimationEndListener();
        DomHandler.removeClass(this.mask.nativeElement, 'p-component-overlay-leave')
      }
      originalBlock.apply(this);
    }

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[MateuszBogdan]

Problem still persists as of version 14.2.2.
Updated repro with angular 14.2.10 and primeng 14.2.2:
https://stackblitz.com/edit/github-7bew7n-qzbckx?file=src/app/app.component.ts

EDIT: I am afraid i cannot reopen the issue. Shall I create new issuie instead?