ionic-team / ionic-team/ionic-framework

bug: react, tab navigation breaks when opening a modal on a tab page

Abierto
#23,863 5 comentarios 2 reacciones 0 asignados Ver en GitHub
package: react type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [X] v5.x
- [ ] v6.x

### Current Behavior

When creating an Ionic React application that has a modal in a nested tab page, the tab navigation will break after opening the modal.

The Application in the provided repository has three tabs: Tab 1, Tab 2 and Tab 3.
Tab 3 has a nested page (path `/tab3/page1`) and on that page there is a simple ``.
When you open (and close) the modal on the nested page, the navigation to Tab 1 will break (Page 1 remains visible - app location is updated to `/tab1`). Oddly, when you navigate to Tab 2 with the tab button, navigation for that tab still works.

### Expected Behavior

The App should show the content of Tab 1 page when tapped on the tab bar button.

### Steps to Reproduce

- Create a new Ionic React app with tabs
- Add a nested page in Tab 3 (with entry in `App.tsx` router outlet ``)
- Add a modal in the nested page
- Run the app, navigate to Tab 3
- Go to the nested page in Tab 3
- Open (and close) the modal in the nested page
- Navigate to Tab 1
- See Bug (the nested page remains visible)

### Code Reproduction URL

https://github.com/hansvn/Ionic-React-tab-navigation-with-modal-bug

### Ionic Info

Ionic:

Ionic CLI : 6.17.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.7.0

Capacitor:

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

Utility:

cordova-res : 0.15.3
native-run : 1.4.0

System:

NodeJS : v12.14.0 (/usr/local/bin/node)
npm : 7.6.0
OS : macOS Big Sur

### Additional Information

I suspect the router doesn't hide the `ion-page` Dom element. The nested page has the `can-go-back` class on the element, but there is no `ion-page-hidden` added to that element when navigating to the first tab.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.