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

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 28 (4 by maintainers)

Commits related to this issue

fix(ios, md): double tapping back button no longer causes app to go back 2 pages (#23526) resolves #18455 — committed to ionic-team/ionic-framework by liamdebeasi 3 years ago

Most upvoted comments

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.

leszekkadlof on Jun 5, 2019

This problem still exists using Ionic/Angular.

cmeuser on Aug 31, 2020

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:

error

alterhu2020 on Jun 13, 2019

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23526, and a fix will be available in an upcoming release of Ionic Framework.

liamdebeasi on Jul 1, 2021

@liamdebeasi I just tried the angular version, it got fixed! 👍 BTW, will it be released in the next version?

ramseyfeng on Jun 30, 2021

Well, until this is properly addressed, I’ve built a custom back-button component that prevents it. In case it’s useful for others, I’ll share the code.

Usage

<app-back-button backHref="/home"></app-back-button>

Source Code

import { Component, Input } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-back-button',
  templateUrl: './back-button.component.html'
})
export class BackButtonComponent {
  @Input() backHref: string;
  public buttonDisabled = false;

  constructor(private navCtrl: NavController) {}

  public async onClick (ev: Event) {
    if (!this.backHref) return;

    this.buttonDisabled = true;
    await this.navCtrl.navigateBack([this.backHref]);
    this.buttonDisabled = false;

    ev.preventDefault();
  }
}

<ion-button [disabled]="buttonDisabled" (click)="onClick($event)">
  <ion-icon name="chevron-back-outline"></ion-icon>
  Back
</ion-button>

drewdaemon on Mar 4, 2020

@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.

wilk-polarny on Sep 3, 2019

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.

Sjoerd on Jun 12, 2019