Skip to content

MenuBar: Up and down arrow key navigation not working with dropdown items in MenuBar #8341

@vincyrose1970

Description

@vincyrose1970

Describe the bug

MenuBar: Up and down arrow key navigation not working with dropdown items in MenuBar.

The issue is reproducable in the main website itself, so not providing a stackblitz project.

Reproducer

https://primereact.org/menubar/#basic

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 2.17 GB / 15.41 GB
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.15.0 - C:\Users\AkshayAntony\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 141.0.7390.76
    Edge: Chromium (140.0.3485.54)
    Firefox: 143.0 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    react: 18.3.1 => 18.3.1

Steps to reproduce the behavior

  1. Go to https://primereact.org/menubar/#basic
  2. Click on a menu item with dropdown, say 'Projects'
  3. Try to navigate using arrow keys, either UP arrow key or Down arrow key.
  4. The focus is not pointing to the items in sub menu and navigation is not working.

I checked PrimeNg and PrimeVue and this navigation is working perfectly there but not in PrimeReact.

20251017-1231-29.7942311.mp4

Expected behavior

The focus should point to the items in sub menu and user should be able to navigate using arrow keys.

This is a recording from PrimeNg where this behaviour works correctly -

20251017-1232-28.9462364.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: BugIssue contains a defect related to a specific component.

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions