DropdownMenu: First menu remains open when clicking on the second menu button

[aymericfontaine]

Hi,

I’m encountering a strange behavior with the DropdownMenu component from shadcn/ui in my Next.js project.

Here’s the issue:
1. When I open the first menu and click outside of it, the menu closes as expected.
2. However, when I open the first menu and then click the button to open the second menu, the first menu stays open, and both menus are visible.

This seems like unintended behavior since I would expect the first menu to close automatically when opening another one.

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function Example() {
  return (
    <div className="flex gap-20">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button>Open 1</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>Open 1</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Billing</DropdownMenuItem>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuItem>Subscription</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button>Open 1</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>Open 2</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Billing</DropdownMenuItem>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuItem>Subscription</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

Here’s a simple example replicating the issue:
• Two DropdownMenu components are placed side by side.
• Clicking on the button for the second menu doesn’t close the first menu.

Is this the intended behavior of the DropdownMenu component? If not, could this be addressed in a future update? Or is there a recommended way to handle such a case?

Thanks in advance! 😊

[Poylar]

I think this is expected behavior, since both menus don't know anything about each other.
If you want to close all menus when you open another, you need to make these components controlled