Navigation issue - double click to push new page

Ionic Framework ionic-v3
1

Running into this odd behaviour, thinking perhaps its a bug, but who knows, I may be doing something wrong. Have followed the Pae structure of the auto generated app.

I have a list of buttons generated through an *ngFor, each button is clickable and pushes a new page.

When one of the list items is clicked, a new page is pushed into the stack and it shows up. Perfect. I click “back” on the auto generated button, it takes me back the root view. Perfect.

However when I click any button on the there after it requires a double click to navigate. Almost as the focus has been taken off the element onto the element, and it now requires one click to re-focus, then the second click to run the desired method.

Obviously not an intended behaviour of a native app. Anyone else run into this? Ideas of how to fix?

I have my rootPage, within there structure goes along the lines:

<ion-nav>  ... <ion-/nav>
<ion-content>
   ...
<ion-/content>
2

would you be able to create a simple demo of this?

3

It may be possible that the button is being wrapped around another element that blocks the ui-interaction with that button for a while (couple of seconds).
If you find such an element, try adding the pointer-events: none; css property to it, this makes it so presses go through the element and allows you to reach the button with a tap.

4

Mhhh, going to give that a try. Also worth noting this is only an issue using the iOS emulator. Web it’s fine. Haven’t tried Genymotion yet/

5

It only seemed to be an iOS issue for me as well.
I had it occur in a different scenario, but it could possibly also be the root of your problem.

6

same here, on iOS too.

it happens after a back action “navController.pop”

When I first load the first page, click the link, everything’s fine, it goes to the second page.
I hit back, click the same link, nothing happens. Click again the same link, then I go to the second page again.

1 Like
7

for the record, with Beta 11, still face the same issue described above in my previous comment

8

Haven’t tested this thoroughly yet, but I think this issue may be a side effect of having created my navbar as a component, and then passed the component in on all the pages where needed. Noticed when I am in child views where the navbar was drastically different, and I created them within the page themselves, this doesn’t seem to be an issue.

Again, has not been confirmed, but is a hunch I’m having. Will update once tested

9

any solution for this? I have the same issue

10

I’m having the same problem. Does someone have any update about this?

11

With RC?

I even forget that problem but couldn’t reproduce it anymore, but my app changed so much in the meantime…

12

Yes, I just created a fresh new app with RC1. The problem fixed itself on its own in your app?

13

Like I said, I did massive changes in the core of my app, so that maybe the reason…gonna have a look during my tests if I still could reproduce it

14

Hi,

I’m having the same issue.
It only appears on IOS, in Android it works fine.

Any idea what could be the root cause?

15

On iOS, the problem appears if you add a (click) directive on a HTML tag that is not a “button”.
However, I don’t know how to fix it.

16

If you add, in case of other element than button, the keyword “tappable” do you still face that issue?

3 Likes
17

Yes it solves the issue, thanks!

1 Like
18

Its Works! Thank you very much

1 Like