[v4 beta-11] A disabled ion-button executes his (click) function

[joel-daros]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/Users/XXXX/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.8.2
   @angular-devkit/schematics : 0.8.2
   @angular/cli               : 6.2.2
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   NodeJS : v8.12.0 (/Users/XXXX/.nvm/versions/node/v8.12.0/bin/node)
   npm    : 6.4.1
   OS     : macOS High Sierra

Describe the Bug
A function associated with a (click) on DISABLED ion-button was executed.

Steps to Reproduce
Steps to reproduce the behavior:

1. Add a button in the toolbar in the slot=primary
2. Associate any function to event (click) of this button
3. Disabled this button
4. When you click this button, the function associated to this button is executed normally, like it was activated.

Related Code
The disabled ion-button in the Toolbar:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="saveData()" disabled>
        <ion-label>
          Save Outside Form
        </ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

The button "SAVE OUTSIDE FORM" is disabled in the toolbar:

When click it, the function associated saveData() was executed like we can see on console:
Save was Executed with a disabled button

Expected Behavior
A disabled button can't be executed.

Additional Context
Working example here on Github: https://github.com/MrSparklle/Inc4

[mhartington]

Thanks!

[simonhaenisch]

@mhartington still happens to me, just updated to @ionic/[email protected]...

Example:

<ion-button disabled onClick={(e: any) => console.log(e.target.disabled)} />

This actually logs true.

I would expect it to not execute the handler on click, or am I supposed to manually check that?

[mhartington]

This appears to be a stencil/JSX issue vs an issue with the component.

In a vanilla example, the button renders correctly and pointer events are disabled.

https://codepen.io/mhartington/pen/VEZGBL?editors=1011

But in a stencil app setup, the disabled attr/prop is not getting passed to the ion-button

cc @jthoms1 and @adamdbradley

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.