chakra-ui / ark

A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.

Home Page:https://ark-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Dialog] Dialog Content is Sometimes Not Interactable Despite Being Visible if open Prop is Set to True on Initial Mount

elson-currentcorp opened this issue · comments

Description

Dialog.Content sometimes does not set pointer-events: auto while visible if Dialog.Root has open={true} set on initial mount.

    <Dialog.Root open={true}>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Title>Dialog Title</Dialog.Title>
            <Dialog.Description>Dialog Description</Dialog.Description>
            <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>

See reproduction

Link to Reproduction (or Detailed Explanation)

Code Sandbox

You may need to refresh the browser a few times for the bug to appear. Seems to be potentially race condition related, if you open up the developer console while refreshing the browser workspace, it is more likely to appear. On my production workspace, it appears 100% of the time.

Steps to Reproduce

  1. Install latest Ark version
  2. create-react-app
  3. Copy the starter code from https://ark-ui.com/docs/components/dialog, but set isOpen to true
  4. Inspect element, Dialog.Content will be uninteractable despite being visible

Ark UI Version

2.2.3

Framework

  • React
  • Solid
  • Vue

Browser

Chrome

Additional Information

No response