Open Dialog from Dropdown menu.

[ensidialabs]

I want to open Dialog from Dropdown Menu. But nothing comes out, does not open. There are no errors. Most likely I'm doing something wrong :) I'm just learning.
Please tell me what they are doing wrong.

https://codesandbox.io/s/charming-heyrovsky-zmw1s8

[andy-hook]

@ensidialabs by default DropdownMenu.Content will close when DropdownMenu.Item is selected, because you have composed Dialog.Content inside DropdownMenu.Content it will be immediately unmounted on item selection.

To fix this you need to move Dialog.Content outside of DropdownMenu.Content

https://codesandbox.io/s/dropdownmenu-dialog-nszobq?file=/src/App.js

[joaom00]

@Natchii59 I think you can use the same approach as @jjenzz with context menu

[Natchii59]

@joaom00 I can't because there is no open props on the context menu

[jd-carroll]

@jjenzz Why not just declare the <AreYouSureDialog /> outside of the dropdown menu entirely, and then use an event handler on the Delete menu item to change the state of open?

(New to react here, so trying to learn)

[uncvrd]

I also have a problem where I took jjenzz's approach but the issue is that once I close my dialog, the contextmenu still remains open. This relies on being able to control the context menu, which is not possible at the moment. I have dropdown menus scattered across my app with this pattern and it works great because I can plug in to the onOpenChange of the dialog to close my dropdown menu too. Unable to with ContextMenu.

Has anyone found a workaround to closing the context menu when the dialog is closed? I'm trying to simulate a click event on the html tag outside of the context menu but the event isn't triggering the closure of the menu

For example, I'm left in scenarios like this:

Screen.Recording.2023-08-11.at.11.35.59.AM.mov

[girithodu]

@uncvrd Were you able to figure it out, because I am struggling with the same issue right now