Is there a way to stop IonItem firing onClick event when a clickable element inside of it is clicked?

Issue

My code looks like this:

           <IonItem
                button
                key={d._id}
                onClick={() => onClick(d._id)}
            >
                <IonLabel>
                    {d.name}
                </IonLabel>
               <IonIcon icon={trashOutline} color="white" onClick={() => { onRemove(d._id) }} />}
            </IonItem>

Behaviour I want is not triggering IonItem's onClick event when IonIcon's onClick event is triggered.

Now when I press the icon the Ionitem is also doing it's thing. Tried nesting IonItems thinking the nested one will block the parent but to no avail.

Is there a way to solve this?

Solution

Set the onClick attribute of your IonIcon to be something like:

const onClickCallback = (event) => {
  // Do what you want to do
  onRemove(d._id)

  // Prevent the event from bubbling up
  event.stopPropagation();
};

This should do what you want.

Answered By - jumbot