Cannot preventDefault on (click) event on ion-checkbox

[jamesgroat]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

The underlying _click fires first and sets checkbox._checked true or false regardless of (click) binding.

Expected behavior:

Ideally I could decide in code whether the click should result in checked or disabled state:

<ion-checkbox [checked]="selected" [disabled]="hidden" (click)="select(); $event.preventDefault();"></ion-checkbox>

Steps to reproduce:

<ion-checkbox (click)="$event.preventDefault();"></ion-checkbox> should prevent the underlying click from firing and not affect _checked state.

Other information:

Found underlying issue while testing fix for #9730 - @brandyscarney

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-201702031703
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

[rapropos]

A potential workaround might be to bind to ionChange instead of click and use the technique described in this forum thread.

[Richie765]

So for completeness, this is the workaround (using ionChange):

handleToggleChange(evt) {
  if(evt.checked !== myModel.checked) {
    // Don't toggle just yet, let it happen reactively
    evt.checked = myModel.checked;
    myModel.toggleChecked();
  }
}

Hope it will be fixed properly in Ionic though.

[jamesgroat]

@Richie765 - thanks. I ended up doing something similar.

Also of note -- ion-toggle probably has the same issue.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!