Ionic-framework: bug: Android hardware back button stops working after redirecting navigation

Created on 19 May 2019 · 18Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic version:
[x] 4.x

Current behavior:

I have an Ionic 4 application where I have a service where I intercept the Angular routers NavigationStart events as follows..

 export class AppRoutingService {
      private currentNavigationForward: RoutingPartsModel;
      private rootNavigation: string;


      constructor(
        private navCtrl: NavController,
        private router: Router,
        private logger: Logger
      ) {
        // Monitor NavigationStart so we can look for a back button and redirect to home
        // page if need be
        this.router.events.pipe(
          filter(e => e instanceof NavigationStart))
          .subscribe((ev: NavigationStart) => {
            this.handlePageRouting(ev)
          });
      }

I want to do this as I have an application wide side menu with shortcuts to each of my feature pages. If a user goes to a feature page from this menu, then I want the back button to then goto the Home page, and NOT the previous feature page where it may have navigated from.

I do this my keeping track of each route forward, and then in the handlePageRouting I have the following code

if (this.currentNavigationForward.params.fromSideMenu) {
            this.currentNavigationForward = undefined;
            this.navigateRoot = undefined;
            this.logger.debug('handlePageRouting - Navigating to home');
            this.router.navigateByUrl(Constants.vals.pageRoutePaths.home);
          }

This all seems to work fine, however, I find that as soon (or soon after) I have had an instance where the above code executes the this.router.navigateByUrl(Constants.vals.pageRoutePaths.home), the Android hardware button stops working. If I go to another feature page from the home page, the hardware back button does nothing. It does not cause a NavigationStart event, nor is the following subscription called when on my home page.

this.backButtonSubscription = this.platform.backButton.subscribe(() => {   
            this.backButtonSubscription.unsubscribe();
            this.logger.info('Home exiting app via back button');
            navigator['app'].exitApp();
          });

However, the toolbar back button does still work, it is only the hardware buttons that stops working, and never recovers until I exit the app, and restart.

Expected behavior:
I would like the hardware button to keep working after I have had to intercept and do the redirect to the Home page

Steps to reproduce:
Run the sample application on an Android device
From the Home page, first show the hardware back button works by using a button to go to either feature 1 or feature 2, and then the back button returns to Home page.

Even if we go to feature1, and then feature 2 via the button on feature 1, the hardware back button will return down the stack as expected. Also, back button from home will exit the app due to the Home page subscription this.platform.backButton.subscribe().

Now, to recreate the issue, go to feature1 via the Home page button, but now drag the side menu open, and goto feature 2.

Use hardware backbutton, and the this.router.navigateByUrl('/home'); in AppRoutingService will return us to the Home page (as we want).

From now on, the hardware back button will not work. We will not see console.log('handlePageRouting'); being logged any more

Related code:
A sample application via GitHub
Sample app to demonstrate this is at https://github.com/pjc2007/backbuttonprob.git

-->

Other information:
Reported this exact thing on Stack Overflow
https://stackoverflow.com/questions/56112539/ionic-4-android-hardware-back-button-stops-working-after-intercepting-navigation

Ionic info:
Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\Latitudeuser\AppData\Roaming\nvm\v10.15.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @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 (Cordova CLI) : 9.0.0 ([email protected])
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)
System:

   Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
   NodeJS            : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

Source

pjc2007

Most helpful comment

Getting the same problem.
The only thing that works is:

document.addEventListener('backbutton', () => {}, false);

Gamaroff on 23 Jul 2019

😕3 👍2 👎1

All 18 comments

Hi, wondering if any thoughts on this one yet, I have yet to find a way around it.

pjc2007 on 1 Jun 2019

In my case, it only works when the app open first time. After navigating to next component, it can back to the previous page but not exit app.

huahuichin on 9 Jul 2019

@huahuichin - did you subscribe to the platform.backButton? Need to do this to exit the app, eg from above

this.backButtonSubscription = this.platform.backButton.subscribe(() => {   
            this.backButtonSubscription.unsubscribe();
            this.logger.info('Home exiting app via back button');
            navigator['app'].exitApp();
          });

In my case all this works until I use the this.router.navigateByUrl as explained above. After this, the software back button still works, but not the hardware one.

pjc2007 on 10 Jul 2019

Hi, just wondering of anyone had a change to look at this? I can still find no other way of doing what I need to do.

Cheers!

pjc2007 on 14 Jul 2019

Hi! Same issue for me, the subscription to hardware back button isn't working. I also tried to use
this.platform.backButton.subscribeWithPriority(9999, () => { // console.log('Success'); });

But this code does't work either

libattistella on 18 Jul 2019

Same here in Ionic 4, the event never gets fired when I press the android back button, I have tried all the above methods. Also tried it with a fresh Ionic 4 project without success.

Deathstarke on 22 Jul 2019

Getting the same problem.
The only thing that works is:

document.addEventListener('backbutton', () => {}, false);

Gamaroff on 23 Jul 2019

😕3 👍2 👎1

Like @Gamaroff said, the only solution for this problem atm is bind a listener to that event, i couldn't get it working using the ionic4's apis. I'm using the lastest version of ionic.

Maybe its related to #17824 and the regressions's issues they got in the lastest version, hope they fix it soon.

aniciom on 23 Jul 2019

In my case, before update the ionic libraries of my project, my app was working fine (ionic v4) and I was able to subscribe to platform.basckButton, but after update to the lastest version, this sibscription stop working

libattistella on 23 Jul 2019

Yep same here @libattistella

aniciom on 24 Jul 2019

With these versions, my application is working again and I have successfully subscribed to the backButton. I hope it helps
"@angular/common": "^7.2.2", "@angular/core": "^7.2.2", "@angular/forms": "^7.2.2", "@angular/http": "^7.2.2", "@angular/platform-browser": "^7.2.2", "@angular/platform-browser-dynamic": "^7.2.2", "@angular/router": "^7.2.2", "@ionic-native/core": "^5.9.0", "@ionic-native/screen-orientation": "^5.9.0", "@ionic-native/splash-screen": "^5.9.0", "@ionic-native/status-bar": "^5.9.0", "@ionic/angular": "^4.6.0", "@ionic/storage": "^2.2.0", "cordova-android": "^8.0.0", "cordova-plugin-device": "^2.0.3", "cordova-plugin-ionic-keyboard": "^2.1.3", "cordova-plugin-ionic-webview": "^4.1.1", "cordova-plugin-screen-orientation": "^3.0.2", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-whitelist": "^1.3.4", "cordova-sqlite-storage": "^3.2.1", "core-js": "^2.5.4", "es6-promise-plugin": "^4.2.2", "rxjs": "~6.5.2", "tslib": "^1.9.0", "zone.js": "~0.9.1"

libattistella on 24 Jul 2019

👍1

this.platform.backButton.subscribe() doesn't even work for me, I am using ionic 4.6.2

RicardoElSabio on 16 Aug 2019

Update to 4.7.1 or later.

Regards

libattistella on 17 Aug 2019

👎1

Confirming that it doesn't work on 4.10.0

alphagamer7 on 7 Oct 2019

any fix for this issue?

moh4sa on 8 Jul 2020

@moh4sa - I never got a work around for it, I had to disable some of my app functionality for Android. I haven't tried Ionic 5 yet as I can't use v5 as it is broken for Windows (Tabs) - which I have to support as well.

pjc2007 on 9 Jul 2020

👀1

In my case, I implemented the "exitApp" after the subscription in the app.component.

It works when you go between pages, but it does not reach the event if it is the first time you open the application, it closes it for me at once.

It's Ionic 5. :/

1antares1 on 13 Aug 2020

Hi everyone,

As of Ionic Framework v5.1.0 most of the outstanding hardware back button issues have been resolved, including the issue noted in the original post. As a result, I am going to close this issue.

To better support the hardware back button integration in Ionic Framework, we launched a dedicated Hardware Back Button Documentation Page that I recommend taking a look at.

If you are still running into issues with the hardware back button on the latest version of Ionic Framework, please create a new issue and include a code reproduction. Thank you!