Button inside button ion-item

[loopezz]

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

I'm submitting a ... (check one with "x")
[ ] bug report
[ X ] 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:
a. button inside button ion-item doesn't trigger click but does trigger the button click
b. button inside ion-item triggers click and ion-item click

Expected behavior:
a. & b. button inside an (button) ion-item should be clickable and trigger the handler for only that button.

This will be usefull in case you want to have an info page for the desired ion-item.

Steps to reproduce:
http://plnkr.co/edit/Xo8OIkjSb3Zx4EDe1lbl?p=preview

Related code:
<button ion-item icon-right (click)="buttonClick()">
Button ion-item
<button ion-button icon-only clear item-right (click)="iconClick()">

<ion-item icon-right (click)="buttonClick()">
ion-item
<button ion-button icon-only clear item-right (click)="iconClick()">

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

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.6.0
Xcode version: Not installed

[Pedrobusou]

Is there a way to achieve this currently?

[loopezz]

I guess with using the grid or creating your own component and CSS (recommended). Here is a try with the grid system, but please notice there is no border under the info button:
http://plnkr.co/edit/EfrwP3zbBHYXxD1S68nY?p=preview

  <ion-list>
    <ion-grid no-padding>
      <ion-row>
        <ion-col>
          <button ion-item icon-right (click)="buttonClick()">Button ion-item</button>
        </ion-col>
        <ion-col col-auto>
          <button ion-button icon-only clear (click)="iconClick()"><ion-icon name="information-circle"></ion-icon></button>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <button ion-item icon-right (click)="buttonClick()">Button ion-item</button>
        </ion-col>
        <ion-col col-auto>
          <button ion-button icon-only clear (click)="iconClick()"><ion-icon name="information-circle"></ion-icon></button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-list>

[Pedrobusou]

Hey I have updated your plnkr with a better, maybe ULTIMATE way to do this. Check this out.

First, make the click function inside the item send an $event,
<ion-list> <ion-item (click)="click()"> This the ion-item we want <button ion-button icon-only clear (click)="customClick($event)"><ion-icon name="information-circle"></ion-icon></button> </ion-item> </ion-list>

Then write at the first line of that fuction event.stopPropagation();

http://plnkr.co/edit/T23bXyeqRWmq6ciqmgyj?p=preview

[loopezz]

It's the best solution so far, but there is just 1 downside left: the info button is too small for touch (fingertip). According to Google's Material Design it should be at least 10x10 mm.

I would like something like this:

[Pedrobusou]

I would say that the original issue is solved and this problem has nothing to do with that one. I think you should create a new one maybe.

As I undestand you are suggesting the default size of the icon button to be bigger.

Meanwhile, you can use some css.
Im a rookie so dont make me much attention

[hamzox14]

(click)="innerButton($event)"
innerButton(ev){ ev.stopPropagation();

I hope this helps..

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#154