Hardware back button not working

Capacitor
1

Hey all

I have this case in my Ionic 4 Capacitor project whereby the back button that I override is not being fired.

On my page, I include the App.addListener(‘backButton’, async (data: any) => {}) to listen for when the hardware back button is pressed and then I have some custom code that should get fired (attached at the end). However, in chrome dev tools all that I can see happening is the following is being output:

’result App.addListener (#111946465)’.

None of my console logs that give me the updated page info are being output and the view isn’t updating either. The apps just hangs there. Please see the following for more details:

What am I trying to do?
In my app, the user can drill down the data set in the page to show the child elements (much like a tree data structure). They can then either user a built in breadcrumb to navigate back or if on Android the hardware back button to navigate back up the tree like structure. Only once the reached the parent most element will they be able to leave the page via the hardware back button.

What is happening?
Sometimes it works as intended, however other times, the back button does not fire at all. From my testing it is not a bug that consistently appears, but rather it is very sporadic.

Output in chrome dev tools?

  1. When I drill down, I get the follow as expected:
    Select Data Current: {data: {…}, list: Array(13), graph: null}
    Select Data Previous: (3) [{…}, {…}, {…}]

These console log just show me what the current data is that will be displayed and what the previous data was that I traversed.

  1. When I navigate back using a button on the app page (for testing) I get the following:
    Testy Current: {data: {…}, list: Array(6), graph: null}
    Testy Previous: (2) [{…}, {…}]

This shows me what my new current/previous is. It has the same code as the hardware back button override

  1. When I use the hardware back button I get the following:
    result App.addListener (#20045592)
    result App.addListener (#111946465)

When the hardware back button does work, I get the same output as in step 2, but it randomly will stop working and previously mentioned.

What have I done to try and fix this myself?

  • I have asked on the world wide slack channel
  • Check forum posts (github, slack, etc…)
  • Consulted with my colleges (that are left at work during the festive season)

None have been of much help.

My Ionic info:
Ionic:

Ionic CLI : 5.4.6
Ionic Framework : @ionic/angular 4.10.0
@angular-devkit/build-angular : 0.803.6
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.3.6
@ionic/angular-toolkit : 2.0.0

Capacitor:

Capacitor CLI : 1.2.1
@capacitor/core : 1.3.0

Utility:

cordova-res : 0.8.0 (update available: 0.8.1)
native-run : 0.2.8 (update available: 0.3.0)

System:

NodeJS : v12.12.0 (/usr/local/bin/node)
npm : 6.13.2
OS : macOS Catalina

Code snippet

this.listener = App.addListener('backButton', async (data: any) => {
     const length = this.previous.length
     const scopeLevel = breadcrumbLength

     this.removeTrends(breadcrumbLength - 1)
     this.trendScope.ref = this.trendScopes[this.trendScopes.length - 1]

     if (scopeLevel > 1 && length !== breadcrumbLength) {
          this.current = { ...this.previous.pop() }

          // TODO: Why theme no update?
          this.variableProvider.theme = this.variableProvider.setTheme(this.current.data)

          this.toast.presentToast('')

          this.cdr.detectChanges()

          this.breadcrumb.pop()

          // If at the highest level of access, clear previous
          if (this.breadcrumb.length === 1) {
               this.previous = []
          }

          this.setPillData()
          this.setCardData()
          this.setTableData()
     }
})

Note: This is a minimalistic snippet of the code that is the core of what I am trying to do.

2

Check out the documentation:
Basically,

import { Platform } from '@ionic/angular';

...

constructor(private platform: Platform) {
  this.platform.backButton.subscribeWithPriority(10, () => {
    console.log('Handler was called!');
  });
}