[Bug]: Uncaught RangeError: Maximum call stack size exceeded. focusElement of Modal

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.4.1

What browser are you using?

chrome

Reproduction repository

Not now.

Describe your issue

while we create Modal multiple (2+) it will throw me

focus-management.esm.js?d1e3:99 Uncaught RangeError: Maximum call stack size exceeded.
    at focusElement (focus-management.esm.js?d1e3:99)
    at eval (use-focus-trap.esm.js?25af:110)
    at handler (use-window-event.esm.js?b5e3:8)
    at focusElement (focus-management.esm.js?d1e3:99)
    at eval (use-focus-trap.esm.js?25af:110)
    at handler (use-window-event.esm.js?b5e3:8)
    at focusElement (focus-management.esm.js?d1e3:99)
    at eval (use-focus-trap.esm.js?25af:110)
    at handler (use-window-event.esm.js?b5e3:8)
    at focusElement (focus-management.esm.js?d1e3:99)
    at eval (use-focus-trap.esm.js?25af:110)
    at handler (use-window-event.esm.js?b5e3:8)
    at focusElement (focus-management.esm.js?d1e3:99)
    at eval (use-focus-trap.esm.js?25af:110)
    at handler (use-window-event.esm.js?b5e3:8)
    at focusElement (focus-management.esm.js?d1e3:99)
    at eval (use-focus-trap.esm.js?25af:110)
    at handler (use-window-event.esm.js?b5e3:8)
    at focusElement (focus-management.esm.js?d1e3:99)
    at eval (use-focus-trap.esm.js?25af:110)

Screenshot here

BTW, can Modal need to provider flag props to disabled focusElement feature, in most case we don’t need this, i think.

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

For everyone finding this issue.

The problem: You want 2 Dialogs, but it won’t work Solution: Dialogs must be nested if you want multiple Dialogs. Dialogs can’t be siblings because if you happen to open them at the same time each Dialog will try to steal focus again because a Dialog should be considered a separate page where you can’t interact with the content behind it.

[iandoe]

We’re having this issue too, it’s a pretty common use case to have sibling modals, other libs like Baseweb handle this fine or at least provide a way to turn off autofocus

Upon opening, focus will be transferred to the first interactive element (unless autofocus is set to false) https://baseweb.design/components/modal/#accessibility

is there a way to do that with HeadlessUI, and if not would you be open to a PR allowing for autofocus to be turned off ?