[DropdownMenu] is it possible to detect when submenu is closed?

[misha-erm]

Hello 👋🏻

There is a property onOpenChange on DropdownMenu.Root but how can I detect when submenu was opened/closed? Is there any way to do it?

I have next scenario:

• when you click on item in a dropdown it moves to "confirmation-required" state
• second click on that item executes action
• when menu or submenu with active items is hidden I'd like to reset 'confirmation-required' state for all items

Thank you

[benoitgrelard]

Hi @MikeYermolayev,

If you are using submenus, it means you end up with nested DropdownMenu.Root's.
So all you need to do is set an onOpenChange on the submenu root.

Here's an example:

<DropdownMenu.Root onOpenChange={/** know if the root menu open/closes */}>
  <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Item 1</DropdownMenu.Item>
    <DropdownMenu.Item>Item 2</DropdownMenu.Item>
    <DropdownMenu.Root onOpenChange={/** know if this particular sub menu open/closes */}>
      <DropdownMenu.TriggerItem>Item 3</DropdownMenu.TriggerItem>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Item 3.1</DropdownMenu.Item>
        <DropdownMenu.Item>Item 3.2</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  </DropdownMenu.Content>
</DropdownMenu.Root>

I hope that helps!

[misha-erm]

Oh, wow. My bad 🤦🏻 Was looking at my code and at the code at docs page and couldn't notice that submenu has it's own DropdownMenu.Root 😅

Thank you