ianbale · GitHub

Prerequisites

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.

Read the original on github.com ↗