Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menubar: (it even exists in the docs) on root list; it selects first element on click, replaces it with the right one when click is released #7471

Open
ahmetmaruferdogan opened this issue Dec 3, 2024 · 4 comments
Labels
Type: Bug Issue contains a defect related to a specific component.

Comments

@ahmetmaruferdogan
Copy link

ahmetmaruferdogan commented Dec 3, 2024

Describe the bug

When clicked and held down on the red dot, it highlights the first element. The aria-activedescendant prop having first item as selected (shown below).
image
image

When click is released it corrects itself:
image
image

it is a minor inconvenience but it causes flickering when the menu item is selected for the first time.

(mine only has css coloring changes. no semantic changes to the code I took from the docs thus it can be replicated in the docs as well. here -> https://primereact.org/menubar/#template )

Reproducer

https://stackblitz.com/run?file=src%2FApp.tsx (it is considered temporary project thus has no direct blitz link. Use the docs instead. the bug also exist here -> https://primereact.org/menubar/#template )

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 Intel(R) Xeon(R) W-1250 CPU @ 3.30GHz
    Memory: 20.76 GB / 31.78 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.68)

Steps to reproduce the behavior

Go to: https://primereact.org/menubar/#template
Click on contact but do not release it. Home element (a.k.a. first element of the list) will highlight. When released, contact element will highlight.

Expected behavior

When clicked on an element it should not flicker the first element of the list. It should directly highlight the correct one.

@ahmetmaruferdogan ahmetmaruferdogan added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 3, 2024
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 3, 2024
@thesohailjafri
Copy link

Reproducer
https://stackblitz.com/run?file=src%2FApp.tsx

The link is not working, can please check @ahmetmaruferdogan

@thesohailjafri
Copy link

I did see the flicker on the main doc on available on https://primereact.org/menubar/#template

@ahmetmaruferdogan
Copy link
Author

Reproducer https://stackblitz.com/run?file=src%2FApp.tsx

The link is not working, can please check @ahmetmaruferdogan

I did see the flicker on the main doc on available on https://primereact.org/menubar/#template

updated the post according to your comments. Thank you for the insights @thesohailjafri

@melloware
Copy link
Member

PR is welcome if someone wants to investigate the cause

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

No branches or pull requests

3 participants