primefaces/primereact

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

Open

#7.979 aberto em 8 de mai. de 2025

Ver no GitHub
 (6 comments) (1 reaction) (1 assignee)CSS (1.207 forks)batch import
Type: Buggood first issue

Métricas do repositório

Stars
 (8.305 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

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.

Guia do colaborador

Direção de pesquisa
Investigue a lógica de gerenciamento de foco no componente Menu, especificamente como a propriedade template faz com que o primeiro item receba a classe 'p focus'. Verifique o código do componente para condições que definem o foco quando um template é usado e compare com itens sem template.
Pilha de tecnologia
javascripttypescriptreact
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactGit
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70