How to use custom keydown with md-menu (and issue with focus ring)

[paladox]

Hi, I'm trying to migrate from iron-dropdown to md-menu. We do https://github.com/GerritCodeReview/gerrit/blob/master/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.ts#L187. I have a couple of issues.

Issue 1 is I can't access this.dropdown.open (always returns false) within that for enter, space, up or down.
Seems that the shortcut callback is triggered after md-menu has closed (if it was open) hence why .open was always false. Seems to work with iron-dropdown and I’m not sure how to fix it for md-menu. I found an workaround below, but would have preferred continuing using shortcut.

Issue 2 is I found a workaround to issue 1 with something like:

  override connectedCallback() {
    super.connectedCallback();
        this.addEventListener('keydown', this.testEvent, { capture: true });
  }

  override disconnectedCallback() {
    this.cursor.unsetCursor();
    super.disconnectedCallback();
    this.removeEventListener('keydown', this.testEvent)
  }

  testEvent(e: KeyboardEvent) {
      //console.log(' nafjifjkfkj ' + this.dropdown?.open)
      if ((e.key === Key.ENTER || e.key === Key.SPACE)) {
        e.preventDefault();
        e.stopPropagation();
        // Menu is still open at this point
        this.handleEnter()
      }
      if ((e.key === Key.UP)) {
        e.preventDefault();
        e.stopPropagation();
        // Menu is still open at this point
        this.handleUp()
      }
      if ((e.key === Key.DOWN)) {
        e.preventDefault();
        e.stopPropagation();
        // Menu is still open at this point
        this.handleDown()
      }
  }

Which allows me to use this.dropdown.open and seems to generally work. So lets go to the issue, when I press enter or space it closes correctly and when I re-open it, it correctly shows the focus rings. Now when I go to a change, those focus rings don't show when I re-open the dropdown.

See https://imgur.com/a/T8ZDWTX

How do I fix? (Source code for the entire thing: https://gist.github.com/paladox/ccdc1971831ed31bf52fa8f96734fee9)

[paladox]

(spent days trying to figure it out but all I've come up with is it working some of the time until the focus ring stops (although pressing enter still works, but up/down doesn't))

[paladox]

seems calling .focus only works once? I'm not sure exactly how to fix.

[paladox]

On https://material-web.dev/components/menu/ when I click on "Apricot" (Apple is selected first) and then re-open the menu, Apple does not have the rings. Think there could be a bug?

Screen.Recording.2025-06-15.at.14.16.34.mov

[paladox]

I found a really ugly hack for issue 2 but it works: https://gist.github.com/paladox/09d0f67df94630278b542b15cfca5b83

https://imgur.com/a/sks20Pr

[asyncLiz]

For issue 1: <md-menu> already implements the accessibility key shortcuts for up, down, enter, and space. Why do you need to re-implement them?

For issue 2: focus rings should not be visible when using the pointer. They should become visible when using keyboard navigation. Mixing pointer and keyboard navigation can result in the focus rings showing inconsistently, but that is expected. Are you expecting the focus ring to show in response to pointer clicks?

---

I would keep in mind that <md-menu> is not a direct replacement for <iron-dropdown>. Iron dropdown is a generic and configurable dropdown utility, while the menu is intended to implement a strict menu accessibility pattern. You may run into issues by preventing default behavior and trying to re-implement it.

[paladox]

I can see if I can get rid of our cursor utility in it but I'm not sure I can.

[paladox]

Tested it without it and yup it requires the cursor utility otherwise it does not work at all. I can't use the keyboard to go down etc.

Also to answer your question, nope I don't expect a ring on pointer click only on keyboard.

[paladox]

@asyncLiz I'm wondering if you know why when I'm trying to build a screenshot test and trying to access md-menu, it just hangs and throws failed to execute structuredclone on window ' htmlelement object could not be cloned?

 ❌ gr-copy-links screenshot tests > dropdown screenshot
      Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
        at createTimeoutError (__web-test-runner__/test-framework/Users/xxx/Documents/workspace/gerrit/polygerrit-ui/node_modules/@web/test-runner-mocha/dist/autorun.js:1:191472)
        at ds._timeoutError (__web-test-runner__/test-framework/Users/xxx/Documents/workspace/gerrit/polygerrit-ui/node_modules/@web/test-runner-mocha/dist/autorun.js:1:195705)
        at __web-test-runner__/test-framework/Users/xxx/Documents/workspace/gerrit/polygerrit-ui/node_modules/@web/test-runner-mocha/dist/autorun.js:1:193786

If I then run it in the browser directly (it opens), I get:

elementHandle.screenshot: Element is not attached to the DOM
Call log:
  - taking element screenshot
  - waiting for fonts to load...
  - fonts loaded
  - attempting scroll into view action
    2 × waiting for element to be stable
      - element is not visible
    - retrying scroll into view action
    - waiting 20ms
    2 × waiting for element to be stable
      - element is not visible
    - retrying scroll into view action
      - waiting 100ms
    4 × waiting for element to be stable
      - element is not visible
    - retrying scroll into view action
      - waiting 500ms
    - waiting for element to be stable

    at Object.executeCommand (/Users/xxx/Documents/workspace/gerrit/polygerrit-ui/node_modules/@web/test-runner-visual-regression/dist/visualRegressionPlugin.js:59:58)
    at async TestRunnerApiPlugin._onCommand (/Users/xxx/Documents/workspace/gerrit/polygerrit-ui/node_modules/@web/test-runner-core/dist/server/plugins/api/testRunnerApiPlugin.js:145:32) {
  name: 'Error'
}

I tried element.dropdown and failed the same and which is why I tried querySelector but that also fails. The thing is when I use the debug logs, I see it outputs the md-menu element. The test is https://gerrit-review.googlesource.com/c/gerrit/+/483441/12/polygerrit-ui/app/elements/change/gr-copy-links/gr-copy-links_screenshot_test.ts. I had to create a button element to add to anchor element as we add the button in the parent element to that element. Seems anchor is required in order for the menu to show?

[paladox]

Using element.shadowRoot?.querySelector('.dropdown-content') seemed to work. I'd prefer to have used element.dropdown still to try and keep is as much to how we did it with iron-dropdown. I'm not sure why it wouldn't work with element.dropdown but did with element.shadowRoot?.querySelector('.dropdown-content').

[paladox]

Oh... seems md-menu doesn't like having <div> etc and only <md-menu-item> in order for it to focus in and start the ring/allowing keyboard? Although an issue I note is that moving to a different page breaks it because when I re-open it, the focus and keyboard stuff doesn't work. I have to refresh the page to get it to work again. @asyncLiz do you have any idea how I can fix that? It's exactly like https://imgur.com/a/T8ZDWTX.

[asyncLiz]

I'm sorry, I don't think I understand the problem, and unfortunately we don't have bandwidth to dedicate to these issues.

Overall from reading this discussion, I'd be cautious about trying to use <md-menu> for this highly customized use case. Menu was not designed to be as generic or flexible as <iron-dropdown>, and there was never a migration path planned between the two.

If you cannot continue to use <iron-dropdown>, I'd suggest forking it (or <md-menu>) to fit into your specific <gr-dropdown> needs. It would probably be easier and more stable to build your own version rather than trying to break down <md-menu>'s expectations and behaviors.

[paladox]

I was trying to use use md-menu with md-menu-item in the intended way but I'm coming across a bug that is shown in here https://imgur.com/a/T8ZDWTX. Although that's a different element to the one I'm currently migrating, it's basically the same issue.

E.g. focus / rings / keyboard don't work after I go to a different page and come back and re-open the dropdown.

Although I may be able to do a workaround similar to gr-dropdown which is basically copying the workaround I think.

[paladox]

I've managed to do the entire replacement and works!! https://gerrit-review.googlesource.com/c/gerrit/+/483441