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 { + _isMounted = false; + ionRouterContextValue: IonRouterContextState = { push: ( pathname: string, @@ -68,15 +70,31 @@ export class NavManager extends React.PureComponent { - 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); }