ionic-team / ionic-team/ionic-framework

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

Đang mở
#23,863 5 bình luận 2 reaction 0 người được giao Xem trên GitHub
package: react type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.