primefaces/primereact

MenuItem: template property causes p-focus on the first item in the list

Open

#7979 aperta il 8 mag 2025

Vedi su GitHub
 (6 commenti) (1 reazione) (1 assegnatario)CSS (1207 fork)batch import
Type: Buggood first issue

Metriche repository

Star
 (8305 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

Describe the bug

The first item of menu always has the focus (css-class "p-focus") if the template property of MenuItem is used. I made a reproducible case: https://stackblitz.com/edit/xtgmp1-hdfzvee8?file=src%2FApp.jsx

A maybe similar case existed in #7055, but my problem exists in the latest version 10.9.5.

Reproducer

https://stackblitz.com/edit/xtgmp1-hdfzvee8?file=src%2FApp.jsx

System Information

System:
    OS: macOS 14.7.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 68.00 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.8.0 - /opt/homebrew/bin/node
    npm: 10.9.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 136.0.7103.92
    Safari: 18.4
  npmPackages:
    primereact: ^10.9.5 => 10.9.5 
    react: 17.0.2 => 17.0.2

Steps to reproduce the behavior

Click on the envelope-icon in the menu, then you see the "messages" text, but the first item got the "p-focus" class.

I've included a custom css which makes the item light gray in that case.

Expected behavior

It should not make a difference in the focus wheter the template property is used or not.

Guida contributor

Direzione di ricerca
Analizza la logica di gestione del focus nel componente Menu, in particolare come la proprietà template attiva la classe 'p focus' sul primo elemento. Controlla il codice del componente per le condizioni che impostano il focus quando viene utilizzato un template e confronta con gli elementi senza template.
Tech stack
javascripttypescriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
ReactGit
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70