Skip to content

fix: keyboard navigation not working for FluentNavLink inside a FluentNavGroup #3996

@cshisol

Description

@cshisol

🐛 Bug Report

Keyboard support for FluentNavLink does not appear to work correctly when it's a child of FluentNavGroup.

💻 Repro or Code Sample

<FluentNavMenu Width="200">
    <FluentNavLink Href="example-page">Example page</FluentNavLink>
    <FluentNavGroup Title="Example group">
        <FluentNavLink Href="example-page">Example page</FluentNavLink>
    </FluentNavGroup>
</FluentNavMenu>

🤔 Expected Behavior

When FluentNavLink has focus via keyboard tabbing, and the enter button is pressed, the user is navigated to the href of the link (like for the first FluentNavLink in the code sample).

😯 Current Behavior

When the FluentNavLink has focus and enter is pressed, the FluentNavGroup collapses and navigation does not occur.

💁 Possible Solution

🔦 Context

🌍 Your Environment

  • Windows 11.
  • Google Chrome and Mozilla Firefox
  • .NET 9 and Fluent UI Blazor library Version 4.12.0

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions