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.

[drewdaemon]

Having the same issue as the original poster.

[drewdaemon]

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>

[jdlopezq]

Hi i'm a similar behavior, on my app when you double click this button de navigation it's trigger twice, even if you click it 3 or 4 times it navigates back the same times as clicked, and when you don't have pages on the stack the button disappears, i'm kind of worry because this endanger the integrity of my app :( this can be duplicated on iOS ,android and with ionic serve on Chrome.

[drewdaemon]

Hi @jdlopezq. I had the same situation, but I was able to fix the problem by building an identical custom component. See my comment above #18455 (comment)

[austin43]

This problem also exists on ionic/react. I created a custom component similar to @drewctate to resolve this in the mean time.

A few things to note:

• this will only work if your back button exists inside an IonPage
• it uses a different icon than IonBackButton, but I actually prefer it as it has a larger button area and looks better

import { IonButton, IonIcon, useIonViewDidEnter } from '@ionic/react'
import { useHistory } from 'react-router'
import { chevronBackOutline } from 'ionicons/icons'
import styles from './AppBackButton.module.scss'

export const AppBackButton: React.FC = () => {
	const [disabled, setDisabled] = useState(true)
	const history = useHistory()

	useIonViewDidEnter(() => {
		setDisabled(false)
	})

	const onClick = () => {
		setDisabled(true)
		if (!disabled) history.goBack()
	}

	return (
		<IonButton className={styles.button} onClick={onClick} disabled={disabled}>
			<IonIcon icon={chevronBackOutline} />
		</IonButton>
	)
}

[drewdaemon]

@austin43 nice work!

[cmeuser]

This problem still exists using Ionic/Angular.

[selected-pixel-jameson]

Would really appreciate a fix for this as it's definitely going to cause issues and is a pretty basic function of a mobile framework.

[DexterHuang]

the issue still exists, only happens when using native android

[codrodev]

I solved this issue by setting the defaultHref attribute of the ion-back-button to =" " then added a [disabled]="flag". this flag will disable and enable the button on a (click) function and Voilà

backButtonDisabled = false;

<ion-back-button
(click)="backButtonPressed()"
[disabled]="backButtonDisabled"
defaultHref=""

backButtonPressed() {
this.backButtonDisabled = true;
this.navCntrl.navigateBack('/map');
}

[expcapitaldev]

any updates?

[ChaminThilakarathne]

This issue still exists using Ionic 5.x

[kensodemann]

@liamdebeasi - I have a sample repo that can repro this: https://github.com/kensodemann/demo-back-button

Tab 1 has a child. Child one has a child.
Open both of them.

Double click back button on child two quickly.
You will end up on tab1 instead of child one.

Note that child-one does not have its own back-button.

[ramseyfeng]

Issue still exists on the latest ionic/angular.
Is there any update on this issue?
Or is there any suggested work round for this?

[ramseyfeng]

My temporary solution before it got fixed:

Use ion-button instead of the ion-back-button

<ion-button (click)="clickBackButton()"> <ion-icon name="chevron-back" size="large"></ion-icon> </ion-button>

And in TS, use debounce for the navControl.back() method:

private navBack = debounce(() => {
    console.log('clickBackButton');
    this.navCtrl.back({
      animated: true,
      animationDirection: 'back',
    });
  }, 500);

clickBackButton() {
    this.navBack();
  }

[liamdebeasi]

Hi everyone,

We appreciate your patience as we work to resolve this issue. Can everyone try the following dev build and let me know if it resolves the issue?

Angular

npm install @ionic/angular@5.7.0-dev.202106281826.d4f4f3f

React

npm install @ionic/react@5.7.0-dev.202106281826.d4f4f3f @ionic/react-router@5.7.0-dev.202106281826.d4f4f3f

Vue

npm install @ionic/vue@5.7.0-dev.202106281826.d4f4f3f @ionic/vue-router@5.7.0-dev.202106281826.d4f4f3f

Stencil/Vanilla JavaScript

npm install @ionic/core@5.7.0-dev.202106281826.d4f4f3f

[ramseyfeng]

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

[liamdebeasi]

Thanks for the issue. This has been resolved via #23526, and a fix will be available in an upcoming release of Ionic Framework.

[drewdaemon]

cc: @gshigeto

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.