Opening a dialog from a context menu

[brianlovin]

Hey team! I've spent some time today trying to figure out how to open a dialog from a context menu, but the way focus works with Radix makes it quite tricky.

Specifically, the problem is:

• Have a context menu item that opens a dialog
• When the dialog is closed the context menu no longer "exists" so there's nothing to return focus to
• The whole body gets locked with the forced pointer-events: none inline style

I found this example where a dropdown can open a dialog: https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q?file=/src/App.js:5148-5255

And this example where a context menu can focus another element, like an input: https://codesandbox.io/s/contextmenu-custom-focus-on-action-28e6cl?file=/src/App.js:478-541

But each of these approaches requires overhead with managing focus states and passing refs around. It also makes it hard to abstract out a ContextMenu component that has some common styles and behaviors, where certain actions in that context menu might invoke a function, or others might invoke a dialog.

Does anyone have ideas on how to simplify this?

This is loosely the kind of abstraction I'd love to end up with, but so far it seems impossible with how focus management works:

const [copy] = useCopyToClipboard()
const deleteBookmark = useDeleteProjectBookmark(bookmark.id)
const [editDialogOpen, setEditDialogOpen] = useState(false)

return (
<>
  <ContextMenu
    actions={[
      {
        label: 'Edit',
        onClick: () => setEditDialogOpen(true)
      },
      {
        label: 'Delete',
        onClick: () => deleteBookmark.mutate()
      },
      {
        label: 'Copy link',
        onClick: () =>  copy(bookmark.url)
      }
    ]}  
  >
    <Button>{bookmark.title}</Button>
  </ContextMenu>

  <EditBookmarkDialog bookmark={bookmark} open={editDialogOpen} onOpenChange={setEditDialogOpen} />
</>
)

So far I've tried putting this on my ContextMenu.Content component:

<ContextMenu.Content
  onCloseAutoFocus={(event) => event.preventDefault()}
>
...
</ContextMenu.Content>