How to use Dialog within Popover?

[pmioduszewski]

I have Dialog inside Popover like this:

<MyComponent>
  <Popover>
    <Dialog/>
  </Popover>
</MyComponent>

When I open Dialog, the Popover disappears.
How to prevent Popover from auto-closing when Dialog is Open?

Why? (use case)
Inside the Popover user can click on the 'delete item' button === dangerous action, that obviously needs some confirmation. So instead of ugly alert I'm willing to use Headless UI Dialog component. After confirmation, user should still be able to delete another item from Popover. Popover should still be open.

Iv'e tried to wrap Dialog with my own portal but Dialog is sucked into Headlessui default one.

I'm stuck, need more brains 😅

[AnnaYuS]

You could try unmount=false on PopoverPanel.
Maybe in your case it works fine. In my case this allows the popover to stay open when the dialog opens, but somehow messes up the popover positioning. I'm using https://github.com/ycs77/headlessui-float for popover positioning, and it doesn't work well with unmount=false.

Maybe there are other ways to fix this?

[yakobe]

Does anyone have a solution for this? The unmount=false would technically work but has side effects and also means that the popover is never unmounted, which is not ideal. I would be very grateful for any suggestions.

[pmioduszewski]

My not-so-satisfying workaround for this is using Dialog instead of Popover.

Multiple / Stacked / Nested, Dialog example:
https://codesandbox.io/s/headlessui-dialog-multiple-modals-bugs-forked-o2ykb?file=/pages/index.js