bug: tab buttons aren't visibly selected when switching between routes that are substrings of another route

[ianbale]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

I have two tabs with paths /scan and /settings
All works well, I can toggle between the tabs. The current tab being highlighted as expected.

I then added a third (temporary) tab with path /scan2

Now if I click the scan2 button, the tab view correctly switched to scan2, but the scan button is highlighted instead of the scan2 button

Expected Behavior

When clicking the scan2 button, the scan2 not the scan button should be highlighted.

Steps to Reproduce

    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/scan">
            <Scan />
          </Route>
          <Route exact path="/scan2">
            <Scan2 />
          </Route>
          <Route path="/settings">
            <Settings />
          </Route>
          <Route exact path="/">
            <Redirect to="/scan2"/>
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="scan" href="/scan">
            <IonIcon aria-hidden="true" icon={scanOutline} />
            <IonLabel>Scan</IonLabel>
          </IonTabButton>
          <IonTabButton tab="scan2" href="/scan2">
            <IonIcon aria-hidden="true" icon={scanOutline} />
            <IonLabel>Scan 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="settings" href="/settings">
            <IonIcon aria-hidden="true" icon={settingsOutline} />
            <IonLabel>Settings</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>

Code Reproduction URL

https://stackblitz.com/~/github.com/ianbale/ionic-tabs-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (/Users/ianbale/.nvm/versions/node/v20.18.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.5.8

Capacitor:

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

Utility:

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

System:

NodeJS : v20.18.1 (/Users/ianbale/.nvm/versions/node/v20.18.1/bin/node)
npm : 10.8.2
OS : macOS Unknown

Additional Information

I have tested the son IOS and Android. I've not looked at web view.

[brandyscarney]

Thanks for the issue! Can you please update the reproduction to show the issue? I am not able to see any issues here:

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ianbale]

Thanks for the issue! Can you please update the reproduction to show the issue? I am not able to see any issues here:

Please take another look. It's definitely showing the issue.

When you click the tab buttons the tabs change content, but the tab button you clicked does not change colour to blue. The first tab remains as the visually selected one.

To expand... If you have two paths where one is an extension of the other such as scan and scan2 or hello and helloworld, the when you select the tab with the longer path, the tab button with the shorter one is always selected, never the longer one.

This happens regardless of whether exact is used in the route or not, although I do not believe this would be the intended use for exact anyway.

If the paths are completed different eg hello and world then there is no problem.

[brandyscarney]

Thanks for the reply! The tab buttons in the example you sent point to different paths, so I didn’t see the issue at first. After updating them, I was able to reproduce it:

tabs-bug.mov

[ianbale]

@brandyscarney

Sorry for the confusion - I had a bit more of a play in the StackBlitz trying different path to the ones I had a problem with my app. I obviously left with slightly different to the code I pasted in here originally...

The issue is not limited to similar paths with numbers. If you try a path "hello" and another "helloworld" then "hello" is always selected when you click "helloworld". So it seems the problem is more generic - if any path is a substring of another then it will be selected.

[ianbale]

I've also tested this in v8. Same problem.