Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component: BlockUI breaks when setting block() before (less than 150ms) unblock() animation finished. #16501

Open
vincent-cm opened this issue Oct 7, 2024 · 1 comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Milestone

Comments

@vincent-cm
Copy link

Describe the bug

When setting blocked flag to true too quick (less than 150ms) after previous value false, the block-ui breaks and it won't behave correctly.

Environment

Chrome browser, Stackblitz provided.

Reproducer

https://stackblitz.com/edit/lfiv1x?file=src%2Fapp%2Fblock-ui-basic-demo.ts

Angular version

18.0.1

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

20

Browser(s)

No response

Steps to reproduce the behavior

  1. Go to https://stackblitz.com/edit/lfiv1x?file=src%2Fapp%2Fblock-ui-basic-demo.ts
  2. Fork the project and log in with your account (in order to display logs)
  3. Open inspector -> logs (default)
  4. Click Simulate HTTP calls button
  5. Filter the log BlockUI::Running
  6. Observe the blocked UI doesn't work as expected, the log shows the order of block/unblock/destroyModal runs, it seems in incorrect order:
    BlockUI::Running Block block()
    BlockUI::Running Unblock destroyModal()
    BlockUI::Running Unblock unblock()
    BlockUI::Running Block block()
    BlockUI::Running Unblock destroyModal()

Observe the screen is not blocking properly and flickering.

** The code setting up a simulated duration of 10 consecutive HTTP calls,
each is fired upon previous one resolved
It gives two timeout: min delays, and min durations,

  1. the block = true only if min delays passed before the HTTP resolves
  2. the block = false if it is previously set to true and it lapsed at least min durations,
  3. when setting min delays < 150ms, the incorrect behaviour is showing above, leaving an unblock listener running

Expected behavior

If setting the min delay = 200 or above, the blocked area correctly represents the duration of the block and the delay of start blocking.
no flickering over the blocked area.

@vincent-cm vincent-cm added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 7, 2024
@mertsincan mertsincan added Resolution: Help Wanted Issue or pull request requires extra help and feedback and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 19, 2024
@mertsincan mertsincan added this to the Future milestone Nov 19, 2024
Copy link

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

@github-project-automation github-project-automation bot moved this to Review in PrimeNG Dec 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Projects
Status: Review
Development

No branches or pull requests

2 participants