primefaces / primefaces/primereact

[v11] Menu: Menu.Portal and Menu.Item with href incompatible

Open
#8,446 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

Description
This is a simplified version of my component:

<Menu>
  <Menu.Trigger>
    <span>Menu</span>
  </Menu.Trigger>
  <Menu.Portal>
    <Menu.List>
      <Menu.Item as={NextLink} href="/">
        Home
      </Menu.Item>
      <Menu.Item as={NextLink} href="/about">
        About
      </Menu.Item>
    </Menu.List>
  </Menu.Portal>
</Menu>

When using the Menu component with Menu.Portal and Menu.Item rendered as link (as={NextLink}), clicking the menu item closes the dropdown without triggering the actual navigation to the href.

Environment

  • PrimeReact: 11.0.0-alpha.9
  • React: 19.2.0
  • Next.js: 15.5.9
  • Tailwindcss: 4.1.17

Suspected Cause
It appears the click event handler that closes the Portal is preventing the default link behavior or stopping event propagation before the NextLink can trigger its navigation. The event sequence seems to prioritize closing the Portal over following the href.

Reproducer

No response

System Information
System:
    OS: Windows 11 10.0.26200
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 10.30 GB / 31.46 GB
  Binaries:
    Node: 23.10.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Chrome: 143.0.7499.147
    Edge: Chromium (140.0.3485.54)
    Firefox: 141.0 - C:\Program Files\Mozilla Firefox\firefox.exe
Steps to reproduce the behavior

See code snippet

Expected behavior

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Menu.Portal and Menu.Item entry points shown in the issue, then reproduce the provided TSX example using NextLink. Trace the click behavior when an item has an href and is rendered through Menu.Portal; done means selecting Home or About both closes the menu and performs the expected navigation.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.