Skip to content

FluentMenuItem Enter key does not invoke OnClick in standalone FluentMenu #5000

Description

@adamint

Describe the bug

When a FluentMenuItem inside a standalone FluentMenu is focused, pressing Enter does not invoke the Blazor OnClick callback. Pointer click on the same item does invoke OnClick.

Expected behavior

Keyboard activation with Enter should behave like pointer activation and invoke the menu item's OnClick callback.

Actual behavior

The focused fluent-menu-item receives browser keydown and keyup events for Enter, but the configured Blazor OnClick callback is not invoked.

Notes from investigation

This was observed while fixing keyboard accessibility in the Aspire Dashboard Resources page.

Diagnostics against Microsoft.FluentUI.AspNetCore.Components 4.14.1:

  • The browser event target and active element were both fluent-menu-item.
  • Document capture and bubble listeners both observed keydown for Enter|Enter.
  • Document capture observed keyup for Enter|Enter.
  • No synthetic click was emitted by the browser.
  • Pointer click on the same FluentMenuItem invoked the configured Blazor OnClick callback.
  • Decompiling FluentMenuItem showed an internal OnKeyDownHandlerAsync path that appears intended to call OnClickHandlerAsync(new MouseEventArgs()) when KeyboardEventArgs.Code == "Enter", but that path did not result in the public OnClick callback being invoked in this rendered standalone-menu shape.
  • Passing onkeyup through AdditionalAttributes or Razor unmatched attributes on FluentMenuItem also did not reach the app callback in this shape.

Related downstream context

Downstream PR: microsoft/aspire#17926

Metadata

Metadata

Assignees

Labels

a11yAccessibillitycommunity:contributionIssue will/can be addressed by community contribution

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions