[react-dropdown-menu] Dropdown which opens a dialog not removing the pointer-events:none style

[felixmosh]

Bug report

Current Behavior

If you open radix-ui dialog from a dropdown item, the pointer-events:none not removes, the UI becomes un clickable.

Expected behavior

It should handle the style properly.

Reproducible example

Example

1. Click on the Dropdown open -> Open dialog item
2. Click on cancel / confirm
3. See that the body element remains with pointer-events: none

as a reference, the same code works with regular button.

Suggested solution

I don't know.

Additional context

I've narrowed the issue to @radix-ui/react-dropdown-menu v0.0.23, with v0.0.22 all works fine.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-alert-dialog	0.0.20
Radix Package(s)	@radix-ui/react-dropdown-menu	0.0.22
React	n/a	17.0.2
Browser	Chrome	latest
Assistive tech
Node	n/a
npm/yarn
Operating System

[benoitgrelard]

Hey @felixmosh, thanks for reporting. This was fixed in #819 and will be available soon in the next release.

[clearly-outsane]

I still have this problem on the latest - I"m not sure why

[joaom00]

@clearly-outsane Can you provide a sandbox?

[clearly-outsane]

I'll try! I hope it's not a bug only in my project xd

[clearly-outsane]

https://codesandbox.io/s/radix-ui-react-dropdown-menu-dialog-bug-nz4rg6

Here - I don't know if this is the right way to have a dialog inside a dropdown but this was causing the weird behaviour.

[joaom00]

It's because when you select a DropdownMenu.Item the DropdownMenu.Content is unmounted which causes the Dialog unmount too. To fix this you need keep DropdownMenu.Content open when open dialog.

In your example, just call event.preventDefault() to prevent closing DropdownMenu.Content. https://codesandbox.io/s/radix-ui-react-dropdown-menu-dialog-bug-forked-k34rcr

Here some examples https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q

[clearly-outsane]

Oh I see! Good catch thank you :D

[mrmattrc]

I have a similar use case where I need to open alert dialogs from a context menu. I forked the example and used ContextMenu (https://codesandbox.io/s/contextmenu-dialog-items-3gp329), but it does not behave the way I'd expected. When closing the dialog, the context menu reappears. How can I close the context menu when the dialog is closed?

[benoitgrelard]

@mrmattrc That's because you need to ensure you use a release of Dialog and ContextMenu that are from the same batch (easiest way to always be inline is to use the latest version of each).

https://codesandbox.io/s/contextmenu-dialog-items-forked-uiyuk0?file=/src/App.js

[brettinternet]

Thank you, I also recently ran into this issue and upgrading a few patch versions fixed it.

[uncvrd]

@mrmattrc That's because you need to ensure you use a release of Dialog and ContextMenu that are from the same batch (easiest way to always be inline is to use the latest version of each).

https://codesandbox.io/s/contextmenu-dialog-items-forked-uiyuk0?file=/src/App.js

Hi @benoitgrelard did the API for the ContextMenu Root component change in 2.1.4? I no longer have the option to add an open prop on the ContextMenu.Root component which means I cannot control the closure of the context menu once an element is selected from the context menu as displayed in Example 2

Current docs don't show it as an option either: https://www.radix-ui.com/docs/primitives/components/context-menu#root

Is there a better way to handle context menu's now? I feel like I'm missing something obvious haha. Thanks a lot for your time!

[CarlosSimon02]

Hi @uncvrd, I was wondering if you found a solution to the problem because I've encountered a similar situation.

[uncvrd]

@CarlosSimon02 unfortunately not :(

[seleckis]

I would say that this issue is still actual and the way to solve it needs to be rethought. I mean the workaround provided (checking trigger reference and comparing to focused one) is counterintuitive and poorly maintainable. We need a normal solution so that the menu closes and can trigger the opening of modal windows and other interactive elements. Preventing methods onCloseAutoFocus and onFocusOutside also don't help, Dialog opens and closes immediately. We also need a solution so that the menu can be closed programmatically later as a result of some actions.