Dropdown: opt-in `close-on-click` attribute

[Vikram-Hegde]

Problem

Clicking a role="menuitem" inside a <ot-dropdown> popover does not close the popover. It only closes on an outside click or another toggle of the trigger.

For in-page actions (e.g. toggling a theme, muting a channel, switching a view) that don't trigger a navigation or page refresh, the dropdown stays open after activation, which breaks the expected "menu item activates and the menu disappears" UX. Users have to manually dismiss it.

Proposed solution

Add an opt-in close-on-click attribute on <ot-dropdown>. When present, clicking any [role="menuitem"] inside the popover calls hidePopover() immediately. The default behavior is unchanged so existing use cases that rely on the popover staying open (e.g. forms, multi-step confirmations) keep working.

<ot-dropdown close-on-click>
  <button popovertarget="my-menu" class="outline">Options</button>
  <menu popover id="my-menu">
    <button role="menuitem">Profile</button>
    <button role="menuitem">Settings</button>
    <button role="menuitem">Help</button>
  </menu>
</ot-dropdown>

PR

A PR with this change is open: #169