primefaces/primereact

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

Open

#7 979 ouverte le 8 mai 2025

Voir sur GitHub
 (6 commentaires) (1 réaction) (1 assigné)CSS (1 207 forks)batch import
Type: Buggood first issue

Métriques du dépôt

Stars
 (8 305 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

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.

Guide contributeur

Direction de recherche
Examinez la logique de gestion du focus dans le composant Menu, en particulier comment la propriété template déclenche la classe 'p focus' sur le premier élément. Vérifiez le code du composant pour les conditions qui définissent le focus lorsqu'un template est utilisé et comparez avec les éléments sans template.
Stack technique
javascripttypescriptreact
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactGit
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
70