Button inside a Button (ionic2)

Ionic Framework ionic-v3
1

Is there any way to achieve an ion-item with functionality similar to the list items in spotify? Where there is a default action for the list item but also a “more” button on the list item that performs a different action.

That is a touch anywhere on the ion item EXCEPT the little more icon indicated by the red arrow performs the default action (go to detail view for example). But a click on the little more icon performs a different action (ie open an actionsheet/pop up or go to a different view than the main click).

image
button-in-button.jpg745×110 9.23 KB

I can’t figure out how to do it as following the ionic2 examples my ion-item is already a button so clicking anywhere on it triggers the default action.

I am using ionic2 Beta7

Appreciate any pointers.

2

Could you share what you have tried so far right now

3

@mhartington - I have attached a link to a plunker showing where I am at and what I have tried.

tap on the item is fine, but tap on the icon button on the right side just passed through to the main button.

Really appreciate any hints on this one.

4

I have updated my plunker above with a solution for anyone who is looking for the same thing. While this works and achieves what I wanted I’m not sure that it’s the most elegant or best solution so would still appreciate feedback from those more savvy than myself!

5

This would be a much better solution than the one you had provided.

6

@mhartington - First thanks for the help! That is pretty much where I started. The problem with that is that the main ion-item is not clickable.

if I change ion-item to button ion-item then the whole ion-item becomes clickable for the default action but there is no way to put another button within that ion-item with a seperate action.

if I don’t wrap the ion-item in a button then there is no touch highlight indication and touch is intermittently unresponsive on devices. The ionic2 docs indicate that using a button ion-item ensures that the item is clickable and responds correctly.

Your solution certainly seems like the right way to go, it just doesn’t work :slight_smile:

Maybe there could be an enhancement where if you add a button item-right inside a button ion-item it gives that button a higher z-index so that it is clickable seperately to the main item? That would make your solution work as I would expect it to.

I can log an issue on github for this if you think that’s the best way to go.

edit: I have updated my plunker with a simplified solution as well, the closest I can get to yours while retaining functionality.

7

I feel your pain :slight_smile:
i also wanted to achive the same functionality as ios recent calls page but failed.
it is strange that ionic doesn’t take care of this automatically since it is a widely used interface.
thank you for your workaround.

8

Try this in your template of the inner button:

(click)="myClickHandler(myParameter, $event)"

and in your corresponding .ts

myClickHandler(myParameter: foo, event: Event) {
     event.stopPropagation();
     ...
}

so that the(click) handler of your outer button element is not triggered when clicking the inner button.

7 Likes
9

wow that’s brilliant. works perceftly. thank you.

10

Excellent, thanks @sZerner!

11

thanks for your solution :heart_eyes::heart_eyes: