Ionic-framework: bug: ion-back-button double tap

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

[drewctate]

Having the same issue as the original poster.

[drewctate]

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.

[drewctate]

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 https://github.com/ionic-team/ionic/issues/18455#issuecomment-594528996

[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 React, { useState } from 'react'
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>
)

}
```

[drewctate]

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

(click)="backButtonPressed()"
[disabled]="backButtonDisabled"
defaultHref=""

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