Clickable button inside an ion-item whereas the ion-item itself is also clickable

Hello,

I am currently trying to create an usersearch where I put the users which match to my input string into an ion-list.
If I press at a user (which are listed in ion-items) it takes me to their profile page.

My problem now is that I want the users which I do not have marked as friends to have a “+Add” button in the same row as their name which I can click to send them a friendrequest.
When I press the button however it executes both functions (the show profilepage and the friend request).

Is it possible, that when I click on the button inside my ion-item it only executes one function?

My current code looks something like this:

<ion-list [virtualScroll]="items">
        <ion-item *virtualItem="let item" (click)="openUser(item)">
            <ion-avatar item-left><ion-img src="{{item.picture}}"></ion-img></ion-avatar>
            <span>{{item.username}}</span>
            <button ion-button (click)="addClick()" outline item-right>+ Add</button>
       </ion-item>
</ion-list>

image

1 Like

I tried something like this

(click)="addClick();$event.stopPropagation();"

It works on android, but not on iOS.

Did you have any luck?

2 Likes

In my case I had the surrounding component as

<button ion-item>...</button>.

If I remove the button part, and just have ion-item it seems to work…

However it then loses some functionality (ie. I want to disable my button, and that doesn’t exist on ion-item).

Anyway, try that $event.stopPropagation(). It seems to work for me :slight_smile:

Yes this is the solution that worked for me, but I didn’t know that it only works for Android. Thanks!

@JoeyWoidl It works on all platforms if it is an ion-item, but if it is a button then it doesn’t work…

This works:

<ion-item (click)="itemClick()">
  Item 1
  <button item-right (click)="addClick();$event.stopPropagation();">Internal Button</button>
</ion-item>

This appears to work on android only (well in my case):

 <button ion-item (click)="itemClick()">
  Item 1
  <button item-right (click)="addClick();$event.stopPropagation();">Internal Button</button>
</button>

So you should be ok in your case.

5 Likes

Alright thats good, thanks! :slight_smile:

thank you boss, it’s working perfect…

Could someone help me with this : Click on Ion-avatar inside ion-item doesnt work

I’ve tried the things you recommend here, but it doesnt work.

Ok guys, solved this using the attribute ‘button’ inside the ‘ion-item’ and setting a timeout in the function;

<ion-item button (click)="itemClick()">
  Item 1
        <ion-button slot="end" (click)="addClick(); $event.stopPropagation()">
        </ion-button>
</ion-item>
itemClick(){
  setTimeout(()=>{
    
  }, 200)
}