ionic-team / ionic-team/ionic-framework

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

Offen
#23,863 5 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
package: react type: bug
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

### 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.