Dialog with defaultOpen closes itself immediatly after first render

[havlasme]

Description

When I set defaultOpen prop of the Dialog to true the Dialog is usually shown only for a fraction of a second and then it's closed. Rarely the Dialog stays open, but then it exhibits another issue, that clicking inside the Dialog.Content closes the Dialog. Even more rarely the Dialog stays open and behaves as expected - maybe like 1 in 30 renders.

I've encountered similar issue when setting the prop open directly to true.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/silent-thunder-5fdk7q

Steps to Reproduce

1. Load the page
2. See the modal, containing text "TEST", is closed (only shown for a fraction of second)

Ark UI Version

4.1.0

Framework

• [X] React
• [ ] Solid
• [ ] Vue

Browser

Firefox, Chromium - latest versions

Additional Information

No response

[segunadebayo]

This is probably related to the interaction outside timings. Here's a temp fix

import { Dialog } from "@ark-ui/react/dialog";
import { Portal } from "@ark-ui/react/portal";
import { useEffect, useState } from "react";

const useMounted = () => {
  const [mounted, setMounted] = useState(false)
  useEffect(()=>{
    setMounted(true)
  },[])
  return mounted
}

export const App = () => {
  const mounted = useMounted()
  return (
    <main>
      <h1>Welcome to Ark UI</h1>
      <p>Please edit src/App.tsx and save to reload.</p>
      <Dialog.Root closeOnInteractOutside={mounted} defaultOpen={true}>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            TEST
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    </Dialog.Root>
    </main>
  );
};

Will dig into it later.

[cschroeter]

@havlasme If you remove the Portal it works fine. There is an open PR for improving the Portal I wll see if that would fixes this issue.