ionic-team / ionic-team/ionic-framework

bug: ionic-tabs inside dynamic route breaks the app.

Open
#30,435 3 comments 2 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/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

v8.x

### Current Behavior

If there is a route with 2+ tabs inside ion-tabs component, and the navigation is done for more then 2 tabs, when navigating to other route without tabs the ion-page is not being removed from DOM, which makes ionic not usable at all, since it overlays over the current page and the current page is not clickable, since it is under the ion-page that should have been removed from DOM.

### Expected Behavior

ion-page containing ion-tab must be removed from dom.

### Steps to Reproduce

1. Create a dynamic route (/dynamic/:id) with 3 children (TabA, TabB and TabC)
2. Navigate to "/dynamic/123/a"
3. Swithc from "/dynamic/123/a" to "/dynamic/123/b" and then to "/dynamic/123/c"
4. Navigate back to "/" you will see the tabs to be present in the bottom of "/" where they don't exist.
5. Inspect DOM and see that both ion-pages ("/" and "/dynmic/:id") is still in DOM.

### Code Reproduction URL

https://stackblitz.com/edit/ojc3imxd

### Ionic Info

```
Ionic:

Ionic CLI : 7.2.1 (/Users/z0lo/.nvm/versions/node/v22.12.0/lib/node_modules/@ionic/cli)

Capacitor:

Capacitor CLI : 7.2.0
@capacitor/android : 7.2.0
@capacitor/core : 7.2.0
@capacitor/ios : 7.2.0

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v22.12.0 (/Users/z0lo/.nvm/versions/node/v22.12.0/bin/node)
npm : 10.9.0
OS : macOS Unknown

```

### Additional Information

`` Helps a little bit but not fixing the issue, at least the ion-router-outlet is being removed. However the ion-tab-bar is still not being removed.

The issue is definetely because of the dynamic route, since if tested not in a dynamic route there is no issue.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.