Setting closeOnInteractOutside Prop to FALSE in Popover Inside Dialog Closes Dialog Unexpectedly

[elson-currentcorp]

Description

I put a popover inside a dialog component. Triggering a control for the popover closes the parent dialog unexpectedly if the popover has closeOnInteractOutside set to false.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/vitejs-vite-hjte8q?file=src%2FApp.tsx

Steps to Reproduce

1. Refresh the page to make sure you are starting off from a blank state
2. Click Toggle Popover which opens the popover hidden within the dialog
3. Click Open Dialog which opens the dialog containing the popover
4. Click Toggle Popover inside the Dialog's Popover.
5. See that the Dialog closes unexpectedly.

Test.Dialog.State.-.StackBlitz.-.Google.Chrome.2024-06-27.10-34-27.mp4

Ark UI Version

3.4.0

Framework

• React
• Solid
• Vue

Browser

Chrome

Additional Information

1. Seems to be a bug because the Dialog is closing unexpectedly even though it is controlled, non-portalled, and has closeOnInteractOutside to false, so shouldn't have anything to do with focus transfering.

2. After further testing, it seems like removing the closeOnInteractOutside prop in the popover component seems to fix this issue, which further convinces me that this is a bug since it has nothing to do with the actual parent dialog.

[segunadebayo]

I don't understand what this reproduction is meant to showcase.

From a UX perspective, why would you want to open a popover without opening the dialog first? It feels like an inversion of control here.

From a technical perspective, the dialog + popover establish a nesting hierarchy when they're open. In this case, the state machine is designed to assume the popover is the parent of the dialog.

Closing the parent layer (popover) in the hierarchy also forces the child layer (dialog) to close. This is what is happening. We could expose a callback to help folks debug/disable this behavior.

For now, I recommend opening the dialog first and then immediately opening the popover.

[segunadebayo]

Here's an actionable work around

<button
  onClick={() => {
    setIsDialogOpen((c) => !c)
    queueMicrotask(() => {
      setIsPopoverOpen((c) => !c)
    })
  }}
>
  OPEN DIALOG
</button>

[elson-currentcorp]

@segunadebayo

This is my use case:

I have a module in my dashboard. The module has a settings popover trigger inside it. It also has a fullscreen button which opens up a dialog with just the module.

If the settings popover is already open on the dashboard module and the user clicks the fullscreen button, the fullscreen module should have the settings popover open as well.

Essentially I'm trying to sync up the two popover states, hence I'm setting a hidden popover inside the fullscreen dialog module whenever the dashboard popover opens or closes.

The reason I need to set the closeOnInteractOutside prop to false is because I don't want outside interactions on the inactive popover to hide the main popover.

Anyways thanks for the help 👍 I believe I can work something out with sequenced state rendering/the example you posted, though it still feels a little weird that the original issue only occurs when closeOnInteractOutside is set to false.

[segunadebayo]

Interesting. This has more to do with managing the timings/sequence of how things open/close.

Does this work for you?
https://stackblitz.com/edit/vitejs-vite-jmnryn?file=src%2FApp.tsx

[elson-currentcorp]

The solution I implemented uses useEffect/render chaining but it works the same in essence to what you posted 👍

If both the popover and the dialog were to open at the same time (since state updates are processed simultaneously per render), how is it decided which one opens first? Wondering if queueMicrotask is safe to use and guarantees the queued function always gets executed one render later.

[segunadebayo]

Yes, queueMicrotask helps with the timings. It's similar to flushSync from react-dom. You could use that too.