next: Re-focussing popover trigger in dialog causes infinite loop

[Jels02]

Describe the bug

If you click on the popover trigger inside of a dialog too quickly (repeatedly) it will cause an infinite loop of focussing/refocussing and there will be an error in console. Best case, the browser stops it, worst case, you crash your tab and have to restart your browser

Reproduction

https://stackblitz.com/edit/stackblitz-starters-zuwmee?file=src%2Froutes%2F%2Bpage.svelte

Logs

bits-ui.js?v=77ba180e:3613 Uncaught RangeError: Maximum call stack size exceeded.
    at focus (bits-ui.js?v=77ba180e:3613:12)
    at HTMLDocument.handleFocusOut (bits-ui.js?v=77ba180e:3691:47)
    at focus (bits-ui.js?v=77ba180e:3613:12)
    at HTMLDocument.handleFocusIn (bits-ui.js?v=77ba180e:3683:9)
    at focus (bits-ui.js?v=77ba180e:3613:12)
    at HTMLDocument.handleFocusOut (bits-ui.js?v=77ba180e:3691:47)
    at focus (bits-ui.js?v=77ba180e:3613:12)
    at HTMLDocument.handleFocusIn (bits-ui.js?v=77ba180e:3683:9)
    at focus (bits-ui.js?v=77ba180e:3613:12)
    at HTMLDocument.handleFocusOut (bits-ui.js?v=77ba180e:3691:47)
Show 94 more frames

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.8.0 
    bits-ui: ^1.0.0-next.52 => 1.0.0-next.52 
    svelte: ^5.0.0 => 5.1.16

Severity

blocking all usage of bits-ui

[Jels02]

Could be related to #755

[huntabyte]

Can you put a video in the issue so I can see what is happening?

[Jels02]

Can you put a video in the issue so I can see what is happening?

Screen.Recording.2024-11-14.at.10.39.27.AM.mov

[huntabyte]

Thanks, I see it now. Appears to be running into a race condition where the focus event for the next is triggering before the previous has cleaned up causing it to basically go into a very brief loop of focusin/out calls. I'll need to investigate this one a bit to determine how to best approach it.

To be clear and as a reminder to myself, this only happens when rapidly opening and then closing the popover.

[Crazytieguy]

On my app when this happens the loop doesn't stop, so the browser tab freezes and has to be killed. Is there something I can do to bypass this issue until it's fixed?

[overiit]

Same here. It freezes the application and renders some parts unusable.
For now the easiest solution likely is to just don't use two overlay/dialog/dropdownmenu/select/etc. components on top of each other, or at least from bits-ui, but would love to hear if there is an update regarding this.

[huntabyte]

I'm working on it 😃