For reference: https://github.com/github/web-systems/issues/228.

Like #38 and #39 this aims to better support having text inputs inside of <details-menu>. This one can be merged independently.

For background on this approach, refer to the research I've done when fixing github/combobox-nav#2. (event.isComposing is not supported in non-Chromium Edge)

You can test this locally with an IME of your choosing and with this simple markup:

  <details open>
    <summary>Best robot: <span data-menu-button>Unknown</span></summary>
    <details-menu>
      <input autofocus>
      <button type="button" role="menuitem" data-menu-button-text>Hubot</button>
      <button type="button" role="menuitem" data-menu-button-text>Bender</button>
      <button type="button" role="menuitem" data-menu-button-text>BB-8</button>
    </details-menu>
  </details>

In the GIFs I was testing with bopomofo. You can do the same by following Apple's instruction.

before	after
Pressing up/down arrow cancels composition and moves focus. Pressing escape closes menu.	Pressing up/down arrow starts composition. Pressing escape stops composition.