Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

I made a mobile application with ionic5 as react and simply used tabs. I accidentally pressed the tab I was in at that moment 2 times and when I click the Hardware back button on my Android phone, it redirected it to that tab again.

Expected behavior:

Shouldn't it don't be kept in memory when I click that tab again while in the tab I am in? Or when I click on that tab, I shouldn't do any redirection. How many times I click on that tab, I want to go to the tab I am in before that tab.

Steps to reproduce:

I can't provide an example, but we can think like this.

There are 3 tabs: Homepage, Search and Profile.
First, I click on the search tab while on the homepage and go to that page.
While on the search page, I click the search tab 1 or more times.
When I press the back button on my Android phone, it redirects me back to the Search page.

Related code:
I use a structure like this.

<IonReactRouter>
  <IonTabs>
    <IonRouterOutlet>
      <Route path="/" render={() => <Redirect to="/home" />} exact/>
      <Route path="/search" component={SearchScreen} exact />
      <Route path="/profile" exact component={ProfileScreen} />
    </IonRouterOutlet>
    <IonTabBar className="tab-bar-box" slot="bottom">
      <IonTabButton
        className="tab-button"
        tab="tab1"
        href="/home">
        <div className="tab-bar-item feed" />
        <IonLabel>{strings.tabs.feed}</IonLabel>
      </IonTabButton>
      <IonTabButton
        className="tab-button"
        tab="tab4"
        href="/search">
        <div className="tab-bar-item search" />
        <IonLabel>{strings.tabs.search}</IonLabel>
      </IonTabButton>
      <IonTabButton
        className="tab-button"
        tab="tab5"
        href="/profile">
        <div className="tab-bar-item profile" />
        <IonLabel>{strings.tabs.profile}</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
</IonReactRouter>

insert short code snippets here

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.11.10 (/Users/root/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.1.1

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 1.3.0

Utility:

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

System:

   NodeJS : v14.12.0 (/usr/local/Cellar/node/14.12.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

Blog

Help! Ionic The back button works incorrectly after multiple clicks on the same tab.

Berat Bozkurt

Bug Report

Join Our Newsletter. No Spam, Only the good stuff.

Related