Unrelated component closing between HoverCard and Dialog

[dvlden]

Description

Having a HoverCard that has items inside that opens a Dialog will either:

1. Toggle dialog on/off at the same time
2. Will show Dialog, but then close it when HoverCard closes itself

I wasn't able to figure out why sometimes it opens Dialog as expected, and sometimes it toggles it on and off immediately. And I definitely couldn't figure out why HoverCard events affects the Dialog.

One thing to note, if I make a logic that allows Dialog to be opened first and then interact with the HoverCard items, the Dialog will remain open at all times - which is good.

Just for a reference, HoverCard is uncontrolled and Dialog is controlled.

Export-1725953655882.mp4

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/vitejs-vite-h7lvq6

Steps to Reproduce

1. Hover over the button
2. Click one of the plain buttons inside I can open Modal #(x)
3. Hover away to close the HoverCard
4. Dialog closes along with it - which is weird and not desired

Ark UI Version

3.11.0

Framework

• React
• Solid
• Vue

Browser

All

Additional Information

I also tried Popover instead of HoverCard and it will behave the same. It will close the dialog automatically, when I close the Popover.

[elson-currentcorp]

May be related to #2611

[segunadebayo]

This is more of an orchestration issue not a bug per say. Let me explain

The Problem

This behavior occurs because we assume that dialogs are nested in most cases, not siblings.

• Open Hovercard: register the parent dialog
• Open Dialog: register the child dialog
• Close Hovercard: Closes hovercard and dialog (due to the nesting)

Child dialogs are closed when the parent dialog is closed. Hovercard, Popover, and Dialog are considered dialogs. The general recommendation is to close a parent dialog before opening the child dialog.

The Fix

For this use case, you don't need to use the Dialog component.

  <Teleport v-if="dialog" to="body">
    <div class="fixed right-0 top-0 z-50">
      <div
         role="dialog"
        class="h-dvh w-[20rem] overflow-y-auto overscroll-contain bg-slate-100 shadow-[-2px_0_6px] shadow-zinc-500/10 ring-1 ring-zinc-200"
      >
        <div class="flex bg-slate-200">
          <button
            @click="() => (dialog = false)"
            class="inline-flex items-center justify-center gap-x-1 px-2 text-base ml-auto"
          >
            &times;
          </button>
        </div>

        <div>Hello World. You just opened an Ark UI Dialog.</div>
      </div>
    </div>
  </Teleport>

Here's a demo: https://stackblitz.com/edit/vitejs-vite-my3utg?file=src%2FApp.vue

Additional Context

We would need to think deeply about supporting sibling dialogs because orchestrating sibling/non-sibling dialogs is a complex use case.

At this point, I should consider adding this to the docs.

[dvlden]

Thanks for the explanation. Yeah, in this specific case, I cannot render dialog as drawer for each item in the hover-card, because of some other nonsense logic.

At least now I know how to approach things and why in that specific manner.

Created non-ark drawer as per your suggestion.