Button: p-button executing methods on click when disabled

[cosmin19]

Describe the bug

Code:

<p-button label="Not OK" disabled="true" (click)="foo()"></p-button>

Bug: foo method is executed on click even though the button is disabled. This happens only when using p-button.

If I'm using

<button pButton label="OK" disabled="true" (click)="foo()"></button>

the foo method is not executed.

Environment

Angular 15.0.4
PrimeNG 15.0.1
Tested in Chrome Version 108.0.5359.124 (Official Build) (64-bit)

Reproducer

No response

Angular version

15.0.4

PrimeNG version

15.0.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.12.1

Browser(s)

No response

Steps to reproduce the behavior

1. Create a foo method in .ts file

foo() { console.log('Hello world') }

2. Add button in .html file

<p-button label="Not OK" disabled="true" (click)="foo()"></p-button>

3. Click on button
4. Observe how method foo is executed

Expected behavior

Disabled buttons should not execute methods on click.

[critchie]

When using p-button you have to use (onClick)="foo()". When using onClick with p-button the click event will not fire when the button is disabled. I struggled with this too until I found the following deep in the documentation.

Events
Events are defined using standard notation in pButton and with on* prefix at p-button.

<button pButton type="button" label="Click" (click)="handleClick($event)">
<p-button label="Click" (onClick)="handleClick($event)">

[jucasoft]

PrimeNg developers need to be notified :) , this problem also occurs in components that themselves use p-buttons, such as fileupload

I saw that there are very old issues about this problem.

I have an idea that it is not easy to fix it, it depends on how chromium intercepts the (click) event

[jucasoft]

@volvachev
I looked at your implementation but I believe it doesn't solve the problem. I suspect the problem is with how chromium catches the "click" event.

@cosmin19 explained the problem very well, it doesn't depend on the graphic style.

[volvachev]

@volvachev I looked at your implementation but I believe it doesn't solve the problem. I suspect the problem is with how chromium catches the "click" event.

@cosmin19 explained the problem very well, it doesn't depend on the graphic style.

Hi, this class addspointer-events: none that block an event such as click.

[jucasoft]

@volvachev I looked at your implementation but I believe it doesn't solve the problem. I suspect the problem is with how chromium catches the "click" event.
@cosmin19 explained the problem very well, it doesn't depend on the graphic style.

Hi, this class addspointer-events: none that block an event such as click.

I have to pay you for a coffee. do cats like coffee?

thank you.

[volvachev]

I have to pay you for a coffee. do cats like coffee?

thank you.

Cats like coffee only with milk 😉. What about dogs?
You're welcome