bug: tapping ion-back-button multiple times goes back multiple pages

[Sjoerd]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

If you tap twice at a back button (while there is no back button on the previous page), you go 2 pages back instead of one.
Expected behavior:

Go one page back
Steps to reproduce:

Create a app with 3 screens, navigate to the thirth screen, add a back button there (<ion-back-button />), double tap it
Related code:

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.0.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0-dev.201905231504.7ab9479
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0
   Cordova Platforms : android 8.0.0, browser 6.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 7 other plugins)

Utility:

   cordova-res : 0.3.0
   native-run  : 0.2.2

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v11.9.0 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[leszekkadlof]

This double-tap on any button is an issue - causes multiple click events to run which causes issues.

Perhaps an optional directive on the button (or a global sass variable) can be considered to allowing user to disable multiple event calls when button is double-tapped or rapid tapped?

It's too tedious to implement stop guards on every button across an entire application when most buttons are single click actions.

[dansiemens]

Double tap also causing #18104

[brandyscarney]

Thanks for the issue! Does this only happen on specific devices or can it be reproduced in Chrome?

[dansiemens]

I've been able to consistently reproduce on both Android and iOS devices.

[Sjoerd]

Thanks for the issue! Does this only happen on specific devices or can it be reproduced in Chrome?

As far as I know only in iOS and Android.

[alterhu2020]

I met this issue for a long time , after the button clicked, the new page had added the css class ion-page .ion-page-invisible when in the blank page, firstly I think the weird issue caused from our vue router navigation, until I search this issue and found it in this opened issue, please help it ,thanks very much.

BTW: It can reproduce in chrome @brandyscarney ,and no need to fast click the back button, just navigate through the page from a child page, it will show this issue. see screen below:

[alterhu2020]

@brandyscarney , I remove the code enteringEl.classList.add('ion-page', 'ion-page-invisible'); in this file: https://github.com/ionic-team/ionic/blob/fa1317359a/vue/src/components/ion-vue-router.ts ,and it can prevent this issue. Only for Vue project.

[wilk-polarny]

@brandyscarney , did you have a chance to look at this?
Also: Weird things happen if you double tap a back button with only one page in the history - this somehow messes up the navigation (with back buttons disappearing, tab bars freezing and not being able to navigate at all,...). Especially with route guards, which is another story.