California | Upgrade v15.02 to v16.02 Popup menu bugs when using in p-table

[nazrulcsebd]

Hi! When upgrade v15.0.2 to v16.1.0. Everything looks good, but the Popup menu does not work in p-table. The popup menu renders frequently and the click event does not work in one click, it needs double click. If I initiate the menu items on ngOnInit as static items then it works fine. But, if I use a function to generate the menu items based on table row data then the problem occurs.

I'm using the California template (Also updated it to v16.9.0). What can I do now, have any suggestions or some upgrade guide or considerations for my context upgrade?

I give the sample code for dynamic binding of menu items.

<p-table id="tblAppPackage" [value]="packageGridObj" styleClass="p-datatable-gridlines"> <ng-template pTemplate="header"> <tr> <th style="width: 5%">Sr. No.</th> <th style="width: 8%">Status</th> <th style="width: 6%">Action</th> </tr> </ng-template> <ng-template pTemplate="body" let-package let-ri="rowIndex"> <tr> <td class="text-center" style="width: 5%;">{{ startRowIndex + ri + 1 }}</td> <td style="width: 8%" class="text-center"> <span *ngIf="checkPackageStatus(package?.status)" style="color: red; font-weight: bold;">{{ checkPackageStatusValue(package) }}</span> <span *ngIf="!checkPackageStatus(package?.status)">{{ package?.status }}</span> </td> <td class="text-center" style="width: 6%"> <p-menu #menu [popup]="true" [model]="getPackageOptionMenuItem(package)" appendTo="body"></p-menu> <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button> </td> </tr> </ng-template> </p-table>

The TS file code for dynamic menu items is based on row data.

`
getPackageOptionMenuItem(packageItem: any) {
let items: MenuItem[] = [];

let currPackageSideLink = this.packageSideLinkObj?.filter(pksl => pksl.packageId == packageItem.packageId)[0];

if (currPackageSideLink) {

  if (currPackageSideLink.processFileInWkf) {
    let processFileInWorkflow: MenuItem = {
      label: 'Process file in Workflow', id: 'linkProcessFileWorkflow', icon: 'pi pi-folder-open', command: (event) => {
        this.fileProcessingForAppWorkflow();
      }
    };
    items.push(processFileInWorkflow);
  }

  if (currPackageSideLink.viewPkg) {
    let viewPackage: MenuItem = {
      label: 'View', id: 'linkViewPackageDetails', icon: 'pi pi-eye', command: (event) => {
        this.goToPackageDetails(packageItem);
      }
    };
    items.push(viewPackage);
  }

  if (currPackageSideLink.publish) {
    let appPackagePublish: MenuItem = {
      label: 'Publish', id: 'linkAppPackagePublish', icon: 'pi pi-check-circle', command: (event) => {
        this.goToAppPackagePublish(packageItem);
      }
    };
    items.push(appPackagePublish);
  }

  
}

return items;

}
`
I inspect the browser when dynamically generating the menu options. Here is the snapshot,

But when given static menu items it works fine.

the code is given below

<p-table id="tblAppPackage" [value]="packageGridObj" styleClass="p-datatable-gridlines"> <ng-template pTemplate="header"> <tr> <th style="width: 5%">Sr. No.</th> <th style="width: 8%">Status</th> <th style="width: 6%">Action</th> </tr> </ng-template> <ng-template pTemplate="body" let-package let-ri="rowIndex"> <tr> <td class="text-center" style="width: 5%;">{{ startRowIndex + ri + 1 }}</td> <td style="width: 8%" class="text-center"> <span *ngIf="checkPackageStatus(package?.status)" style="color: red; font-weight: bold;">{{ checkPackageStatusValue(package) }}</span> <span *ngIf="!checkPackageStatus(package?.status)">{{ package?.status }}</span> </td> <td class="text-center" style="width: 6%"> <p-menu #menu [popup]="true" [model]="itemsOptions" appendTo="body"></p-menu> <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button> </td> </tr> </ng-template> </p-table>

The TS file code is given below

`
itemsOptions: MenuItem[] = [];

ngOnInit(): void {

this.itemsOptions = [
  {
      label: 'Save', icon: 'pi pi-fw pi-check'
  },
  {
      label: 'Update', icon: 'pi pi-fw pi-refresh'
  },
  {
      label: 'Delete', icon: 'pi pi-fw pi-trash'
  },
  {
      separator: true
  },
  {
      label: 'Home', icon: 'pi pi-fw pi-home'
  },

];

}

`

Please solve the problem or give assistance on what's going wrong here.

[cetincakiroglu]

Hi,

What is your Angular version? If you using not synced versions (Angular15 - PrimeNG16) you may have some issues, we advise users to use synced versions.

[nazrulcsebd]

Hi, Prime NG version is 16.0.9 and angular version is 16.0.2

…

On Tue, Nov 28, 2023, 1:46 PM Çetin ***@***.***> wrote: Hi, What is your Angular version? If you using not synced versions (Angular15 - PrimeNG16) you may have some issues, we advise users to use synced versions. — Reply to this email directly, view it on GitHub <#551 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYTYK7VWJDO3AXUQYH4UNDYGWJHFAVCNFSM6AAAAAA73NHLV6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TMOBZGE4DO> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[cetincakiroglu]

Hi,

To replicate the issue on our local template, could you please share the related code pieces in a single comment by formatting the code so we can copy-paste and reproduce the behavior?

[nazrulcsebd]

Yes, I will do that.

…

On Thu, Dec 7, 2023 at 3:49 PM Çetin ***@***.***> wrote: Hi, To replicate the issue on our local template, could you please share the related code pieces in a single comment by formatting the code so we can copy-paste and reproduce the behavior? — Reply to this email directly, view it on GitHub <#551 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYTYK5I2FWU73Z7MJYJFIDYIGGMHAVCNFSM6AAAAAA73NHLV6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TOOBWGU3TI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Md. Nazrul Islam AM (Software Engineer) Smart Aspects Limited House 14, Road 13, Sector 13 Uttara, Dhaka - 1230 Email: ***@***.***, ***@***.*** Mobile: 01912813744 01675951380 Phone (office): 02-8955481

[nazrulcsebd]

Dear Primeng Team,
We are now converting our project to angular 17. I think the problem will be solved in the new version. But the problem is yet not solved. I implemented it to the California 17 version and added a grid that contains the option menu within the table. I give the full code to the git repository (https://github.com/nazrulcsebd/california-theme-problem-grid). Please solve the problem as soon as possible. Please run the code and goto the page url http://localhost:4200/#/uikit/table

The code link https://github.com/nazrulcsebd/california-theme-problem-grid

[syednurulislam]

We are also facing the same problem in our project. Waiting for a nice solution.

[mokid-IU]

We also got this problem. Looking for solution