[Ionic 4] Software & Hardware back buttons problem

Ionic Framework ionic-v3
1

I’m using 4.0.0-beta.13, and I navigate between pages with navCtrl.navigateForward and I go back with <ion-back-button> or with the hardware button on Android.

In a three page app, like this:
1 <-> 2 <-> 3
When I’m on page 3, I go back using the <ion-back-button>, and then I enter again to page 3. After going back again, If I press the hardware back button it will do nothing until I press it multiple times.

The number of times that I need to press the hardware button is the same as the number of times I went back from page 3 to page 2 using the <ion-back-button>. Here is a video of the problem:

I tried using angular router too, and I tried to use the platform.backButton.subscribe() to catch the event and perform a manual go back, but the problem persists, any help on that?

2

I’ve just created a new ionic starter project in v4, and I’ve added some child pages to recreate this issue:

Home code:

<ion-header>
  <ion-toolbar>
    <ion-title> Home </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="go()">Navigate</ion-button>
</ion-content>

go() {
  this.navCtrl.navigateForward(['child1/']);
}

Child1 code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Child 1</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="go()">Navigate</ion-button>
</ion-content>

go() {
  this.navCtrl.navigateForward(['child2/']);
}

Child2 code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Child 2</ion-title>
  </ion-toolbar>
</ion-header>

Same behaviour, the number of times that I need to press the hardware button for returning to Home from Child 1 is the same as the number of times I went back from Child 2 to Child 1 using the <ion-back-button> .

3

Does it change something when you actually wait for the promise to resolve, don’t pass an array as parameter and don’t add the slash in the url at the end but at the begin?

async go() {
  await this.navCtrl.navigateForward('/child1');
}
4

@reedrichards tanks for the response, tried right now with same behaviour. I’ve updated the first post with a video of the problem.

5

Not sure actually, maybe try to add the attribute defaultHref to the back button?

6

Thanks for the response, yes I’ve already tried this with no success. Seems like the navigation from the hadware button picks another way than the other one, and needs to perform multiple backs to catch the current state of the software one.

7

Ummmm unfortunately don’t have any other idea :disappointed_relieved:

8

No problem, I’ll leave it as it is for now because it’s not a huge bug, but it’s really annoying…

1 Like
9 
import { Platform } from '@ionic/angular';
import { AppMinimize } from '@ionic-native/app-minimize/ngx';
....// blah blah
constructor( private platform: Platform,private appMinimize: AppMinimize) {
            this.platform.backButton.subscribe(()=>{
                // navigator['app'].exitApp();
                this.appMinimize.minimize();
            });
    }
....// blah blah

Try the above code… Its working for me perfectly as the android home button works