Ionic-framework: ion-button's click handlers inside ion-item in RC3

[ggnzlpz]

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:
In RC3, with this sample code:

<ion-item (click)="a()">
          <h2>...</h2>
          <div>
            <button ion-button icon-only clear item-right (click)="b1($event)">
                <ion-icon name="remove-circle"></ion-icon>
            </button>
            <button ion-button icon-only clear item-right (click)="b2($event)">
                <ion-icon name="add-circle"></ion-icon>
            </button>
          </div>
</ion-item>

Every click on the buttons calls "a" handler, but "b" handlers are never called. In RC2 this worked as expected using $event.stopPropagation() in "b" functions to prevent calling "a".

Expected behavior:
Buttons inside an ion-item should handle click events.

Steps to reproduce:
Use the sample code in any ionic project using RC3 to see b1 and b2 are never called.

Related code:

<ion-item (click)="a()">
          <h2>...</h2>
          <div>
            <button ion-button icon-only clear item-right (click)="b1($event)">
                <ion-icon name="remove-circle"></ion-icon>
            </button>
            <button ion-button icon-only clear item-right (click)="b2($event)">
                <ion-icon name="add-circle"></ion-icon>
            </button>
          </div>
</ion-item>

Ionic info:

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.6.0
Xcode version: Not installed

[beardroid2005]

Hi
I have found this issue on ion-input

    <ion-item>
      <ion-label floating><ion-icon name="location" margin-right></ion-icon>Location</ion-label>
      <ion-input (click)="showAddressModal()" [(ngModel)]="location" type="text"></ion-input>
    </ion-item>

With RC2, when touch the input, start the event and show modal
In RC3 the event works when touch the input, input has the focus, retouch the input.

[corran2go]

I've the same issue, this prevents updating my App from RC2 to RC3, as my navigation list depends on this to work correctly for (un)folding subchapters

[ncapito]

I did some research on this this am and I've tracked it down (I believe) to this block of code:

item.ts:348 which was interoduced with feat(tappable): auto add tappable attribute for ion-item clicks

if (!(<any>renderer).orgListen) {
      (<any>renderer).orgListen = renderer.listen;
      renderer.listen = function(renderElement: HTMLElement, name: string, callback: Function): Function {
        if (name === 'click' && renderElement.setAttribute) {
            renderElement.setAttribute('tappable', '');
        }
        return (<any>renderer).orgListen(renderElement, name, callback);

      };
    }

If I comment out renderElement.setAttribute('tappable', ''); it bubbles up correctly (calls inner then outer). I'm looking into now what tappable does now. If anyone wants to speed up the process by explaining it to me chime on in.

[ncapito]

Research complete! So if i leave everything as is and I just modify this line line in normalize.scss stuff starts working.

a ion-label,
button ion-label,
[tappable] ion-label {
  //pointer-events: none;  //if i comment this out the clicks work!
}
````


Who can speak to the reason behind this line,   Is it @adamdbradley  ? 


A potential change is 

a ion-label,
button ion-label,
[tappable] > ion-label {
pointer-events: none;
}

```

But I dont know what the intent is behind this block of scss.

[jgw96]

Hello @ggnzlpz and @ncapito , mind posting the function that you are calling on the button inside ion-item ?

[ncapito]

I used his example:

html:

  <ion-item (click)="outerButton($event)">
    <h2>Hello there</h2>
    <div>
      <button ion-button icon-only clear item-right (click)="innerButton($event)">
          Remove   <ion-icon name="remove-circle"></ion-icon>
      </button>
    </div>
  </ion-item>

In a e2e ts file:

  outerButton(data){
    console.log('\n\n\n\n\n outerClicked', data);
  }

  innerButton(data){
    console.log('\n\n\n\n\n innerButton', data);
  }

[ggnzlpz]

Using previous example by @ncapito, my original code was something like:
... (click)="innerButton($event)" ...
innerButton(ev){ ev.stopPropagation(); ... }
Thanks @ncapito for your time!

[ncapito]

If you need a short term work around @ggnzlpz use css to override pointer-events: none; for your component.

.my-component 
[tappable]  ion-label {
  pointer-events: auto;
}

Still waiting on the consequences of doing it ;)

[manucorporat]

Fixed 🎉 : https://github.com/driftyco/ionic/commit/4512c5c8588e4fcf2432110f4aab1dc4db6ca14c

[ncapito]

@manucorporat do you know why it was originally there?

[manucorporat]

@ncapito sure! https://github.com/driftyco/ionic/pull/6205

[melodyJie]

renderElement.setAttribute('tappable', '');
What does this code doing?
Do you know how he binds the touch event?

[ionitron-bot[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.