From c501da73be879db0fea818c507bae4386a47d42e Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartin.dev>
Date: Wed, 28 Apr 2021 17:47:33 -0400
Subject: [PATCH] fix(react): remove hardware back button event listener when
 NavManager is unmounted (#23224)

resolves #23170
---
 .../test-app/cypress/support/commands.js      |  4 +++
 packages/react/src/routing/NavManager.tsx     | 30 +++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/react-router/test-app/cypress/support/commands.js b/packages/react-router/test-app/cypress/support/commands.js
index a5a16d7425..8b9fc58cba 100644
--- a/packages/react-router/test-app/cypress/support/commands.js
+++ b/packages/react-router/test-app/cypress/support/commands.js
@@ -123,3 +123,7 @@ Cypress.Commands.add('ionMenuClick', () => {
   //   .click()
   // cy.get('ion-menu.show-menu').should('exist');
 });
+
+Cypress.Commands.add('ionHardwareBackEvent', () => {
+  cy.document().trigger('backbutton');
+});
\ No newline at end of file
diff --git a/packages/react/src/routing/NavManager.tsx b/packages/react/src/routing/NavManager.tsx
index b8933e96c5..cc71dfd51b 100644
--- a/packages/react/src/routing/NavManager.tsx
+++ b/packages/react/src/routing/NavManager.tsx
@@ -33,6 +33,8 @@ interface NavManagerProps {
 }
 
 export class NavManager extends React.PureComponent<NavManagerProps, NavContextState> {
+  _isMounted = false;
+
   ionRouterContextValue: IonRouterContextState = {
     push: (
       pathname: string,
@@ -68,15 +70,31 @@ export class NavManager extends React.PureComponent<NavManagerProps, NavContextS
     };
 
     if (typeof document !== 'undefined') {
-      document.addEventListener('ionBackButton', (e: any) => {
-        e.detail.register(0, (processNextHandler: () => void) => {
-          this.nativeGoBack();
-          processNextHandler();
-        });
-      });
+      this.handleHardwareBackButton = this.handleHardwareBackButton.bind(this);
+      document.addEventListener('ionBackButton', this.handleHardwareBackButton);
     }
   }
 
+  componentDidMount() {
+    this._isMounted = true;
+  }
+
+  componentWillUnmount() {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('ionBackButton', this.handleHardwareBackButton);
+      this._isMounted = false;
+    }
+  }
+
+  handleHardwareBackButton(e: any) {
+    e.detail.register(0, (processNextHandler: () => void) => {
+      if (this._isMounted) {
+        this.nativeGoBack();
+        processNextHandler();
+      }
+    });
+  }
+
   goBack(route?: string | RouteInfo, animationBuilder?: AnimationBuilder) {
     this.props.onNavigateBack(route, animationBuilder);
   }