primefaces / primefaces/primereact

Menu: lack of possibility to disable menu item's highlight on hover effect

Open
#7,511 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Enhancement
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

In one of the previous versions (v10.3 in my case) when I hovered over the menu item - and moved the mouse pointer outside of the Menu's panel, the item lost the hover effect.

In the latest version, it is not possible to disable it so once you hover over the item and move your cursor outside of the Menu's panel - the previously hovered item has the "highlighted" effect applied.

It is possible to disable such behavior in the Dropdown component by setting the focusOnHover=false

Reproducer

https://stackblitz.com/edit/qhjakw4h-7hq2pvpg?file=src%2FApp.jsx

System Information
System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz 
    Memory: 17.13 GB / 31.93 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\NodeJS 20.10.0\node.EXE
    npm: 10.2.3 - C:\Program Files\NodeJS 20.10.0\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.51)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    primereact: ^10.8.5 => 10.8.5
    react: ^18.2.0 => 18.2.0
Steps to reproduce the behavior

No response

Expected behavior

It is possible to disable the described behavior

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 linked StackBlitz reproducer and compare Menu hover handling with the Dropdown component's focusOnHover=false behavior. Trace the Menu component's hover or focus state and verify that, when the behavior is disabled, moving the pointer outside the panel removes the highlighted effect.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.