search

chakra-ui / ark

Ark UI is a headless UI library with over 45+ components designed to build scalable Design Systems that works for a wide range of JS frameworks.
https://ark-ui.com
MIT License
3.8k stars 109 forks source link

Dialog freezes when closed on an inactive Chrome tab #3002

Closed giero closed 1 month ago

giero commented 1 month ago

Description

When I delay closing the Dialog and switch to another browser tab in Chrome, and then return to the tab with Dialog, it is still open and any interaction is blocked.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/sandbox/ark-ui-dialog-forked-s7wfhn

Steps to Reproduce

  1. Go to sandbox in Chrome
  2. Click on Open Dialog
  3. Click on Delayed close and switch fast to another browser tab for 2-3 seconds (closing has 1s cooldown)
  4. Switch back to tab with sandbox - Dialog is still open and is blocking UI (only refreshing the page works)

Ark UI Version

4.1.2

Framework

Browser

Google Chrome

Additional Information

I've done some tests and I'm almost certain that the problem lies when Dialog is animating.

When I removed

[data-scope="dialog"][data-part="content"][data-state="open"] {
  animation: scaleIn 0.25s ease-out;
}

[data-scope="dialog"][data-part="content"][data-state="closed"] {
  animation: scaleOut 0.2s ease-in;
}

from css - Dialog closes, but backdrop is frozen. Removing all animation code from css makes the Dialog close properly.

segunadebayo commented 1 month ago

Good catch! Thanks for digging in further to give me a clue.

I just pushed a fix for this in Zag.js. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.