Fix: BlockUI mask blocking interactions during exit animation

[connorabbas]

Issue

When the blocked prop was toggled rapidly (e.g., fast API calls completing around 50-150ms), the BlockUI mask element would remain in the DOM during its exit animation and continue blocking pointer events. This prevented users from interacting with elements underneath, even though the visual overlay had faded out and isBlocked was false.

The problem was most noticeable during stress testing or rapid pagination where block/unblock cycles happened faster than the CSS animation duration (~300ms).

Reproducer link: https://stackblitz.com/edit/primevue-4-vite-issue-template-jg3s6cmh?file=src%2FBlockUITest.vue

closes #7817

Root Cause

The unblock() method was setting isBlocked = false only after the exit animation completed (in removeMask()). While the mask element remained in the DOM during the animation, it still had pointer events enabled, blocking all user interactions with the underlying content.

Solution

Set pointer-events: none on the mask element immediately when unblock() is called, before the exit animation begins:

this.mask.style.pointerEvents = 'none';

This allows click events to pass through the mask to the content below while the mask visually animates out. The mask element is still properly cleaned up after the animation completes.

Additionally, moved isBlocked = false and the unblock event emission to the beginning of the unblock() method for immediate state updates.

Testing

Verified fix using the same testing component from the stackblitz reproducer:

primevue_block_ui_pr_fix.mp4

[connorabbas]

@mertsincan & @tugcekucukoglu
Can you please verify the changes are done in right direction?

I have several projects affected by the linked issue.