<sl-menu slot=submenu> <sl-menu-label> <sl-divider> clicks close the ancestor <sl-dropdown>

[CetinSert]

Description

<sl-menu slot=submenu> <sl-menu-label> <sl-divider> clicks close the ancestor <sl-dropdown>!

<sl-dropdown class=sl-theme-dark open>
  <sl-button slot=trigger caret>Menu</sl-button>
  <sl-menu>
    <sl-menu-label>Label</sl-menu-label>     <!-- ✔️ click does nothing -->
    <sl-divider></sl-divider>                <!-- ✔️ click does nothing -->
    <sl-menu-item>
      Submenu
      <sl-menu slot=submenu>
        <sl-menu-label>Label</sl-menu-label> <!-- ❌ click closes dropdown -->
        <sl-divider></sl-divider>            <!-- ❌ click closes dropdown -->
        <sl-menu-item value=find>Find…</sl-menu-item>
      </sl-menu>
    </sl-menu-item>
  </sl-menu>
</sl-dropdown>

To Reproduce

Steps to reproduce the behavior:

1. Go to sl.rt.ht/2207?
2. Open Submenu
3. Click/tap on Label
4. ❌ Menu dropdown closes!

To see my monkey patch in action:

1. Go to sl.rt.ht/2207?
2. focus the input (Ctrl+I)
3. uncomment the selection (Ctrl+/)
4. Open Submenu
5. Click/tap on Label
6. ✔️ Menu dropdown will not close!

Demo

⚡RTCode.io demo with my monkey patch: sl.rt.ht/2207?

Screenshots

Not available. See the description and the demo.

Library / Browser / OS

• Library: Shoelace 2.17.1 (likely affects older versions as well)
• OS: not relevant (tested both the bug and the fix on Windows 11)
• Browser: not relevant (tested both the bug and the fix with Chrome and Firefox)
• Browser version: not relevant (tested both the bug and the fix with Chrome 129, Firefox 131)

Additional information

My demo has a monkey patch ready for you to test!
⚡RTCode.io is already using it for all <sl-menu>s.

_{The Monkey Patch 👟🐒🛠️}

<style  scope=sl-fix-submenu-click>sl-menu { cursor: default; pointer-events: none; * { pointer-events: all; } }</style>
<script scope=sl-fix-submenu-click type=module>/**/                                             const unclickable = new Set([ 'SL-MENU-LABEL', 'SL-DIVIDER', 'SL-MENU' ]);                                                               const { signal } = window.slSubmenuClickFix = new AbortController();
  [...document.querySelectorAll('sl-menu')].forEach(m => m.addEventListener('click', e => { const X = unclickable.has(e.target.tagName); if (!X) return; console.warn('slSubmenuClickFix', e.target.tagName); e.stopImmediatePropagation(); }, { signal, capture: true, passive: true }));
</script>