I am encountering an issue with PrimeNG's p-tabMenu when it comes to disabled menu items.
For example, suppose I have a tabMenu with 4 sub tabs labeled AAA, BBB, CCC, and DDD.
This is how the menuItems are set up in the TypeScript component:
//....
invDocs: InventoryDocs[] = [];
invMenu: InventoryDocs[] = [];
this.invMenu = this.data.cdMenu;
this.invDoc = this.data.cdDocs;
this.menuItems = [];
if(this.invMenu != null && this.invMenu.length > 1){
this.showMenu = true;
for (let i = 0; i < this.invMenu.length; i++) {
this.menuItems.push({label: this.invMenu[i].fileDescr, id: this.invMenu[i].menuId, disabled: this.invMenu[i].subCount > 0});
this.activeItem = this.menuItems[0];
}
this.currentPdf = this.invDoc.docBlob;
}
activateMenu(tab){
console.log(tab);
this.invDocId = tab.activeItem.id;
this.showMenu = true;
this.retriveCurrentPdf(this.invDocId);
}
.....//
Here is a sample value pushed:
this.menuItems.push({lable: 'AAA', id: 1, disabled: false});
this.menuItems.push({lable: 'BBB', id: 1, disabled: true});
this.menuItems.push({lable: 'CCC', id: 1, disabled: true});
this.menuItems.push({lable: 'DDD', id: 1, disabled: false});
'AAA' is set as active by default.
The HTML of my component looks like this:
<div style="width: 3em;">
<p-tabMenu #tab [model]="menuItems" [activeItem]="activeItem" (click)="activateMenu(tab)" class="customWrapper" ></p-tabMenu>
</div>
The page displays 4 tabs where AAA and DDD are enabled while BBB and CCC are disabled. The issue arises when clicking on disabled tabs triggering the click event, although the activeItem property remains unchanged, leading to unexpected behavior. How can I prevent clicks on disabled tabs?