Only one instance of DropdownMenu open at the same time

[franciscohanna92]

Is it possible to have only one instance of DropdownMenu being shown at the same time? I have a list with each item having a DropdownMenu. I can click on every trigger and multiple dropdown menus display at the same time. When I click outside, they close one by one as if popped from a stack

I think the main "problem" is that a previously open dropdown menu does not close when a click on the trigger for another one, and thus mulitple keep open at the same time.

[joaom00]

You are probably not structuring the component correctly. It would be something like this:

{items.map((item) => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger />
    <DropdownMenu.Portal>
      <DropdownMenu.Content>
        { ... }
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
))}