shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
75.45k stars 4.73k forks source link

[bug]: MenuBar inside ContextMenu close issue #5663

Open ridvanonal opened 3 weeks ago

ridvanonal commented 3 weeks ago

Describe the bug

When I use a context menu within the menu bar, when the context menu closes, the menu bar content also closes, or when I open the context menu again, the menubar content closes again.

Actually, there is no problem in its operation, but when I click outside, only the context menu should close.

Affected component/components

ContextMenu

How to reproduce

When I use a context menu within the menu bar, when the context menu closes, the menu bar content also closes, or when I open the context menu again, the menubar content closes again.

<Menubar>
 <MenubarTrigger>Menu</MenubarTrigger>
 <MenubarContent>
  <ContextMenu>
   <ContextMenuTrigger asChild>
    <MenubarItem>Menu Item</MenubarItem>
   </ContextMenuTrigget/>
   <ContextMenuContent>
   </ContextMenuContent>
  </ContextMenu>
 </MenubarContent>
</Menubar>

Actually, there is no problem in its operation, but when I click outside, only the context menu should close.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

shadcn@2.1.3

Before submitting

zenoUsman commented 3 weeks ago

It's easy to do that you need to state variable isMenuOpenbar which control it

export default function MenubarWithContextMenu() {
  const [isMenubarOpen, setIsMenubarOpen] = React.useState(false)

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger onClick={() => setIsMenubarOpen(true)}>File</MenubarTrigger>
        <MenubarContent onPointerDownOutside={(e) => e.preventDefault()} forceMount={isMenubarOpen}>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>New Window</MenubarItem>
          <MenubarSeparator />
          <ContextMenu>
            <ContextMenuTrigger asChild>
              <MenubarItem>
                Share
              </MenubarItem>
            </ContextMenuTrigger>
            <ContextMenuContent>
              <ContextMenuItem>Email link</ContextMenuItem>
              <ContextMenuItem>Copy link</ContextMenuItem>
            </ContextMenuContent>
          </ContextMenu>
          <MenubarSeparator />
          <MenubarItem>Print...</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}