Tap passed to replacement component after the original component is removed

Ionic Framework ionic-v3
1

I have designed an ionic component that has an x button in the top right corner.

tapping the buttton results in the component emitting an event that triggers a function call in the parent which changes a boolean (which determines if the child component is show) to false, removing the child.

My issue is that when a user taps on the x it appears to remove the component and then pass the tap along to the component that replaces it. This has the undesireable effect of the user being launched into a section of the app that they were not trying to access.

MicrosoftTeams-image
MicrosoftTeams-image.jpg1080Ă—1920 253 KB
MicrosoftTeams-image (1)
MicrosoftTeams-image (1).jpg1080Ă—1920 185 KB

Using (tap) I run in to this issue. If I revert to using good old angular (click) then the issue no longer manifests.

Is this some kind of bug or am I doing things in a way that is not preferred?

2

What’s your reason for using (tap) rather than (click)?

3

I was under the impression that it’s better to use (tap) than (click) ionic apps. After all it still is a tap right? Is this how it’s supposed to behave?

4

Honestly, I’m not sure how it’s supposed to behave.

I’ve always just used (click), as that’s what the docs and community have always recommended. So while it may be a little conceptually counter-intuitive, it’s the recommended way.

5

(tap) is generally used on div elements

<div tappable (tap)=“myFunction()”></div>

I’ve yet to see (tap) recommended over (click) in regard to Ionic elements

That being said, it’s possible that (tap) is “tapping” your entire item, or causing multiple functions to fire at the same time.

6

(click) should work on elements (such as div) that you add the tappable attribute to. Or at least it does in my experience.

7

Yeah, you’re right on that one. (tap) is used on div’s for performance reasons I think, but it’s not a necessity. I tried recreating the issue in an app, but (tap) isn’t causing any unexpected behavior. I’m testing in the browser. @golear, is this issue coming up testing in the browser, actual device, emulator?

Now i’m just really curious as to why there’s a difference in outcome.

1 Like
8

On a side-note, wouldn’t logic dictate that (tap) ought to be used on an element that is made “tappable”? Otherwise, would the element not be made “clickable”?

Maybe not, but an entertaining thought at the least.

9

Android device is where it’s manifesting itself. I’m also on ionic 3.7.0, not the latest.

10

Are you passing $event to the button?

(tap)=“myFunction($event)”/>

That may be of help. I’d suggest sticking with (click) and forgetting about it, but better not to leave room for bugs to haunt.

I can’t imagine being on 3.7.0 would cause the issue.

1 Like
11

I would concur. (click) is definitely an angular concept, so I’d imagine that they just continued that tradition. Plus with their move to including PWA having click as a “catch all” makes a bit more sense imo.