bug: hardware back button not firing in react development build

[tallpants]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When using React 18's createRoot API and @ionic/react-router (which is the default created with Ionic's CLI when doing ionic start photo-gallery tabs --type=react --capacitor for example) with a debug build, the hardware back button on Android does not work at all.

Default tabs app when using createRoot API

doesnt-work.mp4

Default tabs app when using deprecated ReactDOM.render

works.mp4

When you change back to using the old ReactDOM.render API, it works again. However this is discouraged and no longer supported by React itself (see https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis):

Expected Behavior

Hardware back button works when using React 18's createRoot API just as it does when using the deprecated ReactDOM.render API on both debug and release builds.

Steps to Reproduce

In the attached reproduction URL you'll find two branches -- a main branch which shows the issue (which is the default starter app created by running ionic start app-name tabs --type=react --capacitor), and a works branch which is the same app but changed to use the old ReactDOM.render API instead of the createRoot API, which works as expected.

Run the app by checking out the branch you want and then:
npm i
ionic cap run android -l --external and selecting an emulator / real-device

Code Reproduction URL

https://github.com/tallpants/ionic-react-18-router-reproduction

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
       
       Require stack:
       - /Users/adithya/.config/yarn/global/node_modules/@ionic/cli/lib/project/index.js
       - /Users/adithya/.config/yarn/global/node_modules/@ionic/cli/lib/index.js
       - /Users/adithya/.config/yarn/global/node_modules/@ionic/cli/index.js
       - /Users/adithya/.config/yarn/global/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 6.20.4 (/Users/adithya/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.4.2

Capacitor:

   Capacitor CLI      : 4.6.1
   @capacitor/android : 4.6.1
   @capacitor/core    : 4.6.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.1

System:

   NodeJS : v16.16.0 (/Users/adithya/.n/bin/node)
   npm    : 8.11.0
   OS     : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the report. I'm not able to reproduce this behavior when testing on a Pixel 4a with Android 13. Does this issue persist on a physical Android device?

[tallpants]

@liamdebeasi I can reproduce this on a physical device as well yes -- but only when using a debug build, it works as expected when running a release build. I'll update the issue to reflect this, but are you sure you're on the main branch when you try to run the reproduction?

[liamdebeasi]

Running in debug mode does reproduce the issue. The this._isMounted flag in

ionic-framework/packages/react/src/routing/NavManager.tsx

Line 91 in a31e1e5

if (this._isMounted) {

is false which causes the page to not go back. It appears there are mounting/unmounting differences when running in debug vs. production mode. I am going to take a closer look at this.

[liamdebeasi]

In development mode, React creates multiple instances of NavManager: https://github.com/ionic-team/ionic-framework/blob/a31e1e594d4ed7bbcf690b27eee143da232f2bdc/packages/react/src/routing/NavManager.tsx#LL35C14-L35C14. However, the first instance is never mounted.

Both instances register an ionBackButton event listener on creation. When the component is unmounted, the listener is removed. The handler only executes when this._isMounted is true. Since the first NavManager never mounts, it receives the ionBackButton event and then does nothing. I will work on a fix.

[liamdebeasi]

Here is a dev build if you are interested in testing the proposed fix:

npm install @ionic/react@6.4.3-dev.11673975616.167277ef @ionic/react-router@6.4.3-dev.11673975616.167277ef

[liamdebeasi]

Thanks for the issue. This has been resolved via #26614, and a fix will be available in an upcoming release of Ionic Framework. Feel free to continue testing the dev build, and let me know if you run into any issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.