bug: react, transitioning tabs page away hides tab page before transition finishes

[milanharia]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When routing from a tab page to a non-tab page, the active tab state of the tab bar is lost which sets the .ion-page-hidden class to the IonPage which applies display: none to it. This causes the page to be hidden whilst the new page is transitioning over the tab page which causes it so appear like it is unmounting.

Expected Behavior

If a page that is not part of the tab ion-router-outlet is being routed to, the .ion-page-hidden class should be delayed until the page transition has completed. The class may need to tweaked as the z-index style may still need to be applied.

Steps to Reproduce

Transition from a page that is in an ion-router-outlet that is wrapped in ion-tabs to a page that is not (that does not have a tab bar). You will see the tab page go blank (display: none) as the page transition is playing.

https://user-images.githubusercontent.com/76167627/173867260-eac42e1f-d12d-43bd-be2e-38f816078b36.mov

Code Reproduction URL

https://github.com/milanharia/ionic-react-tab-navigation

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.1.10

Capacitor:

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

Utility:

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

System:

NodeJS : v16.14.2 (/usr/local/bin/node) npm : 8.7.0 OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. When a tabs page is no longer active, Ionic React considers that tab page to have no tab selected. When the page transition begins, the tabs page is no longer considered active. As a result, the tab page gets hidden. While things are working as intended, I think this behavior can be improved. It is probably worthwhile to align Ionic React's behavior with that of Ionic Angular and Ionic Vue which both keep the tab active within the context of the tabs component.

[liamdebeasi]

@aparajita Thanks for checking. Do you have a minimal repro I can use to test this in Ionic Vue?

[aparajita]

@liamdebeasi false alarm. I looked a little closer at our code and someone had put code in that was hiding the tab bar. Sorry for the noise.

[LetrixZ]

Found that this line is causing the issue when navigating from a tab page to a page outside the tab 'context': https://github.com/ionic-team/ionic-framework/blame/9f013b7a5138f992cf310666ff190814e053bcb9/packages/react-router/src/ReactRouter/StackManager.tsx#L181

Uncommenting it and using 500 instead of 250 seems to fix this issue. But I have another issuewhen navigating back.

ion-page-hidden is handled well for the IonPage component that holds the IonTabs. However, the tabs' IonPage that's inside is not handled until the transition finishes and shows blank. The original video doesn't have this problem for some reason.

Another workaround that I found is to remove the (leavingViewItem && !enteringRoute && !enteringViewItem) if branch that adds ion-page-hidden. The IonTbs parent page already manages the ion-page-hidden so it shouldn't cause any conflict in this case.