Dialog is sometimes not interactive on initial mount

[erm1116]

Description

In Dialog, elements may not become interactive when using Portal.
#2295 seems to have the similar problem.

---

our dialog component implementation is as follows:

    <ArkDialog.Root
      lazyMount
      unmountOnExit
      modal
      open={isOpen}
      onOpenChange={handleOpenChange}
    >
      <Portal>
        <ArkDialog.Backdrop className={classes.backdrop} />
        <ArkDialog.Positioner className={classes.positioner}>
          <ArkDialog.Content className={classes.container} ref={ref}>
            <ArkDialog.Title>
              {title}
            </ArkDialog.Title>
            <ArkDialog.CloseTrigger
              className={classes.closeTrigger}
            >
              <CloseIcon />
            </ArkDialog.CloseTrigger>
            {children}
          </ArkDialog.Content>
        </ArkDialog.Positioner>
      </Portal>
    </ArkDialog.Root>

If the Portal is not used, this problem will not occur, so there may be a race condition problem in the Portal.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/loving-morning-4vk2xj

Steps to Reproduce

Unfortunately, the exact same problem was not reproduced on CodeSandbox.
But, if you click the reload button several times, you can encounter the problem of the Dialog closing without doing anything.
I think this is related to race conditions.

CleanShot.2024-09-06.at.09.43.11.mp4

---

The reproduction capture of using our Dialog implementation is below:

CleanShot.Aug.16.mp4

Ark UI Version

CodeSandbox: 3.10.0, Our implementation: 3.7.0

Framework

• React
• Solid
• Vue

Browser

Google Chrome (Chromium 128.0)

Additional Information

I've also posted it on discord.
https://discord.com/channels/964648323304808488/1273658223735476294

Perhaps, an Issue I created earlier is relevant.
#2744

[segunadebayo]

This is an interesting race condition within the Portal. I can't reproduce this on my end, though.

I recommend opening the dialog when the page mounts via a useEffect if it's a blocker.

I can't think of a way to fix this since it's within React's timing.

[ivancuric]

Were you able to reproduce #2716 (comment)?