Add DropdownMenu.Close & ContextMenu.Close as in Popover.Close

[juspky]

Feature request

Overview

I'm using a menu with a sub and a custom item with buttons inside. I've realized there is no way to programmatically close the menu. So I can't use the button to close the menu.

Popovers already have the .Close component having such a component in DropdownMenus and ContextMenus would make much more customizable menus possible.

Examples in other libraries

I would consider Radix Popover a fitting example since it shares a lot of code.

react-menu which I previously used and can't fully deprecate until I can programmatically close the menu using Radix https://szhsin.github.io/react-menu/docs#focusable-item exposes a closeMenu function. But their API is very different to Radix.

Who does this impact? Who is this for?

Everyone that wants to programmatically close a Dropdown or ContextMenu. For example if you want something more complex then a DropdownMenuItem but still be able to close it after interactions.

[juspky]

I realized you could potentially make dropdown menu controlled using the open prop, but this is a lot of overhead since then you got to handle everything yourself. Also this doesn't work for ContextMenu since it doesn't have an open prop

[mboudreau]

Yeah, I'd like for this to be a feature as well. Furthermore, I tried the fully managed way, and there was some odd behavior with a model that would pop up on click and I needed to close the dropdown (third party library was gobbling up the click event), but for some reason, setting open=false on the component would close the modal, like if it was triggering some kind of event which closed the modal.

Very odd behavior...

[osnoser1]

I just noticed this problem too, it should be good to have this feature in the ContextMenu

[benoitgrelard]

Why would a Close part be needed for DropdownMenu and ContextMenu?

[juspky]

Why would a Close part be needed for DropdownMenu and ContextMenu? @benoitgrelard

For example, if I have a DropdownMenu/ContextMenu and have some sort of Custom DropdownMenu.Sub Content that does not use the default DropdownMenu.Item which would close the menu if I triggered it.

Look at the screenshot I attached to the issue.

I would like to wrap the "Bestätigen" (german for "Confirm") Button in a Close component, the same way as I would do it in a Popover to close the menu once i've set the date and confirmed it.

To put it into a general users perspective, the way we can just wrap things with Close in Popovers is really developer friendly, a similar component would be really helpfull when doing a bit more custom then just using DropdownMenu.Item