Fix Tab key not confirming highlighted dropdown suggestion (#27112)

[nitishagar]

Fixes #27112

Root cause

PR #11204 (commit 611294d365) rewrote menuItem() in templates.js and dropped the assignment of options.onKeyPress onto the rendered element's onkeypress DOM property, while keeping the equivalent onClick wiring (tryOnClickEvent).

The keyboard router in utils.js consumes the suggestion via that DOM property:

default:
  if (selectedItem.onkeypress) {
    selectedItem.onkeypress(evt);
  }

Because menuItem no longer sets item.onkeypress, it is always undefined, so the Tab-to-confirm handler defined by both producers (combo-box.js, autocomplete.js) never runs. Enter and mouse-click still work because they route through onClick / selectedItem.click(), which was preserved.

Testing done

• Ran the frontend lint suite and production build:
  • yarn lint → passes (eslint . && prettier --check . + stylelint src/main/scss, all green, exit 0)
  • yarn build → passes (webpack production build compiles, exit 0)
• Verified correctness at the contract level: the fix assigns element.onkeypress = opt.onKeyPress as a DOM property, which is exactly what the existing consumer at utils.js:167 reads and invokes (selectedItem.onkeypress(evt)). The producer handlers (combo-box.js:14-20, autocomplete.js:24-30) run confirm() + e.dropdown.hide() + evt.preventDefault() on evt.key === "Tab", so Tab will now confirm a highlighted suggestion identically to Enter.
• Confirmed Enter and mouse-click are unaffected: their path (tryOnClickEvent click listener + keyboard.js selectedItem.click()) is untouched.
• No automated JS test is added: this repo has no JavaScript unit-test harness for keyboard-event routing (no jest/mocha/vitest), and ComboBoxTest.java is HtmlUnit-based and cannot synthesize a real keydown event that traverses makeKeyboardNavigable. The fix is verified by the surgical correctness of restoring the exact pre-Introduce experimental API for adding actions to experimental Run UI #11204 wiring (property assignment) that the existing consumer depends on.
• Recommended manual verification in a running dev instance: in New Item → "Copy from" (autocomplete) and any <f:combobox>//project-relationship field (combobox), type to show suggestions, arrow-down to highlight one, and press Tab — the value should be filled and the dropdown hidden, identical to pressing Enter.

Screenshots (UI changes only)

Not a visual change; behavior-only fix.

Before

After

Proposed changelog entries

• Fix the Tab key confirming the highlighted suggestion in autocomplete and combobox dropdowns

Proposed changelog category

/label regression-fix

Proposed upgrade guidelines

N/A

Submitter checklist

• The issue, if it exists, is well-described.
• The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
• There is automated testing or an explanation as to why this change has no tests.
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
• New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
• UI changes do not introduce regressions when enforcing the current default rules of Content Security Policy Plugin. In particular, new or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
• For dependency updates, there are links to external changelogs and, if possible, full differentials.
• For new APIs and extension points, there is a link to at least one consumer.

Desired reviewers

@mention

[MarkEWaite]

• Recommended manual verification in a running dev instance: in New Item → "Copy from" (autocomplete) and any <f:combobox>//project-relationship field (combobox), type to show suggestions, arrow-down to highlight one, and press Tab — the value should be filled and the dropdown hidden, identical to pressing Enter.

I am not clear what you mean when you say "Recommended manual verification". Did you perform the verification yourself? If not, please do so.

Including screenshots or a screen recording is one way to show that you've performed the expected interactive testing.

This is the second pull request that you've opened. It appears you may not have read the contributing guidelines. Please read and follow them.

Until I closed your previous pull request, you had more open pull requests than are allowed for a new contributor. That means you didn't follow the instructions in the must read issue. Please read and follow the instructions in the must read issue:

• MUST READ: Instructions for newcomer contributors #26359

[MarkEWaite]

Requesting changes to indicate that there are questions in my earlier review.

[Copilot]

Pull request overview

Restores Tab-to-confirm behavior for highlighted dropdown suggestions by reintroducing the DOM-property wiring (element.onkeypress) that the existing keyboard navigation/router code path invokes.

Changes:

• Adds tryOnKeyPressEvent() to wire dropdownItem.onKeyPress onto the rendered menu item as element.onkeypress.
• Calls tryOnKeyPressEvent() from menuItem() alongside existing click and other special-case wiring.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[nitishagar]

@MarkEWaite Thank you for taking the time. Apologies for missing the contribution guidelines. I'll keep only this pull request open until it is accepted or rejected before opening any others.

Below is screenshot of the change: