P-Button-Click not triggering inside of body-ng-template of P-Table

[ab-maikm]

I'm submitting a ...

[x] bug report
[ ] feature request 
[ ] support request

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-ndxfps-sc3pqp?file=src/app/app.component.html

Current behavior
If you put a P-Button inside of the body-part! (ng-tempalte) of a P-Table and the value of the table is set by a let of a function, then the button-click-event will not trigger at all. Only if the Value comes from a class-property it will work just fine.

Expected behavior
The Button-Click-Event should trigger, independent on the way we fill the data of the table.

Minimal reproduction of the problem with instructions

• Put a P-Button inside the Body-Part of the P-Table
• Fill the Data of the Table with a function that returns a let or the Data directly! (not a class-property)
• Check if the onClick-Event of the P-Button will trigger (it will not)

What is the motivation / use case for changing the behavior?
Can only use a Button inside of the Table if i fill it correctly

Please tell us about your environment:
Plain Project with PrimeNG installed

• Angular version: 5.X
  @angular-devkit/architect 0.1001.7
  @angular-devkit/build-angular 0.1001.7
  @angular-devkit/core 10.1.7
  @angular-devkit/schematics 10.1.7
  @angular/animations 10.2.3
  @angular/cdk 10.2.7
  @angular/cli 10.1.7
  @angular/elements 10.2.3
  @schematics/angular 10.1.7
  @schematics/update 0.1001.7
  ng-packagr 10.1.2
  rxjs 6.6.3
  typescript 4.0.5

• PrimeNG version: 5.X
  11.0.0-rc.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Tested in Chrome and Firefox

• Language: [all | TypeScript X.X | ES6/7 | ES5] *
  ES5

• Node (for AoT issues): node --version = v12.18.3

[niklasbz]

Also in Primeng 13 (Orderlist item template)

[ThoSap]

I experience exactly the same as @niki200100 with the OrderList (p-orderList) template pTemplate="item".
The only difference is, that I use a Checkbox (p-checkbox) inside the OrderList ng-template pTemplate="item".
Accessing the checkbox using tab and then pressing space works fine, only the mouse click does not register.

[ThoSap]

Update: increasing the Z-Index of the div that has the p-checkbox element as a child to 5 with PrimeFlex class z-5 fixed the issue 😉
https://www.primefaces.org/primeflex/zindex

[gwin003]

I have the same issue, but the z-5 workaround is not working for me. I am using with p-buttons or p-splitbutton and neither work.

<div class="col-4 text-right z-5">
    <button pButton class="p-button-info" type="button" label="" icon="pi pi-pencil" (onClick)="edit(item.id)"></button>
    <button pButton class="p-button-info" type="button" label="" icon="pi pi-trash" (onClick)="delete(item.id)"></button>
</div>

[cetincakiroglu]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[danielomontero]

I have the same issue, but the z-5 workaround is not working for me. I am using with p-buttons or p-splitbutton and neither work.

<div class="col-4 text-right z-5">
    <button pButton class="p-button-info" type="button" label="" icon="pi pi-pencil" (onClick)="edit(item.id)"></button>
    <button pButton class="p-button-info" type="button" label="" icon="pi pi-trash" (onClick)="delete(item.id)"></button>
</div>

[JonasBrockmoeller]

I have the same issue with buttons in a P-Picklist in a P-Template="item". Interestingly the buttons can be clicked when I emulate a mobile device in the dev mode in chrome, but it does not work without the dev mode.
The z-index fix did not work for me either.
Thanks in advance. Any help is appreciated :)

`
<p-pickList [source]="availableApps" [target]="selectedApps"
[responsive]="true" filterBy="name" [dragdrop]="true"
sourceHeader="Available Apps" targetHeader="Selected Apps"
[showSourceControls]="false" [showTargetControls]="false"
sourceFilterPlaceholder="Search" targetFilterPlaceholder="Search"
[sourceStyle]="{'height':'25rem'}" [targetStyle]="{'height':'25rem'}">

<ng-template let-app pTemplate="item">
  <div class="z-5">

    <p-avatar id="left" label="{{app.name?.toUpperCase().charAt(0)}}"></p-avatar>

    <b id="middle">{{app.name}} ({{app.version}})</b>

    <button pButton (click)="openNew(app)" icon="pi pi-info-circle"></button>
  </div>
</ng-template>

`

Here it does NOT work:

Here it works with all dimensions:

[geraldhe]

Interestingly the buttons can be clicked when I emulate a mobile device in the dev mode in chrome, but it does not work without the dev mode.

I've the same problem. Another finding: it works without mobile-device-dev-mode, if you press the button for a little longer...

@JonasBrockmoeller Did you resolve the issue in the meantime?

[JonasBrockmoeller]

No I'm sorry, don't remember solving the issue and I'm not actively working on the project anymore. I hope you can find a fix for it...