While utilizing the p-menu component from PrimeNG in popup mode ([popup]="true"), I encountered an unexpected issue where the first item in the menu is automatically selected and turns gray. Here is the code snippet that I am using:
<p-menu #menu [popup]="true" [model]="items">
<ng-template pTemplate="item" let-item>
<a class="p-menuitem-link flex justify-content-between align-items-center"
*ngIf="item.icon=='delete', else other">
<div class="tw-flex tw-items-center tw-space-x-2" [ngStyle]="{'color': item.icon === 'delete' ? 'red' : 'inherit'}" (click)="confirm1($event)">
<span class="material-icons-round">{{ item.icon }}</span>
<span>{{ item.label }}</span>
</div>
</a>
<ng-template #other>
<a class="p-menuitem-link flex justify-content-between align-items-center">
<div class="tw-flex tw-items-center tw-space-x-2">
<span class="material-icons-round">{{ item.icon }}</span>
<span>{{ item.label }}</span>
</div>
</a>
</ng-template>
</ng-template>
</p-menu>
I have attempted various solutions, such as adding a hidden item at the beginning of the menu and tweaking the CSS, but none have resolved the issue. Is there a way to prevent the automatic selection of the first item in a p-menu in popup mode?
If you were to address these concerns in English for your Stack Overflow post, how would you respond? What steps have you taken so far?
When it comes to disabling the automatic selection of the first item in the p-menu while in popup mode ([popup]="true"), I have explored multiple avenues. These include inserting a hidden item at the start of the menu and adjusting the CSS settings without success.