bug: Tapping an active tab creates an unexpected behavior

Bug Report

Ionic version: 5.0.0

Current behavior: When I tap on an active tab and then navigate to a page outside of the tabs, the animation doesn’t work as expected plus the back button disappears. I faced this issue in a current project and created a PoC to confirm that it is not my code fault but a core fault.

Expected behavior: The expected behavior is that whenever an active tab is tapped, no action should be taken. Somehow, double-tapping the tab mess up the state of the application.

Steps to reproduce:

1. Run the application provided in the repo PoC
2. Click on the navigate blue button that is located in Tab 1
3. It will normally move to the next page
4. Click on the back button to go back to the tabs page
5. Click Tab 1
6. Click the navigate button once again

Related code:

PoC repo: https://github.com/jayserdny/ionic-5-tab-bug-repro

Other information: I currently mitigated this issue to move on with my development. A suggestion I have is to check if the tab that the user is trying to navigate is the active tab. If so, cancel the event.

I did a similar workaround by creating an object that holds the state of each tab. If the current tab is active, I disabled that tab to avoid the double-tapping. Similar behavior can be implemented internally to detect the current tab and the clicked tab.

Here can be an example of the solution:

https://github.com/ionic-team/ionic/blob/master/core/src/components/tabs/tabs.tsx

...
@State() selectedTab?: HTMLIonTabElement;
...

private onTabClicked = (ev: CustomEvent<TabButtonClickEventDetail>) => {
    const { href, tab } = ev.detail;

    if (tab === selectedTab.tab) {
        return; // or just don't do anything and execute the block below in an else statement.
       // Or emit an event to the caller so the developer can make a custom action if the active tap is tapped (example, Facebook app when tapping the active tab, it scrolls to the top)
    } // else {
    if (this.useRouter && href !== undefined) {
      const router = document.querySelector('ion-router');
      if (router) {
        router.push(href);
      }
    } else {
      this.select(tab);
    }
    // }
}

Ionic info:

Ionic:

   Ionic CLI                     : 6.0.2 (C:\Users\Jayser Mendez\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

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

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[wilk-polarny]

@liamdebeasi , you’re right. My fears became baseless after checking out the version you provided. I can confirm, that the snapshot build resolves the issue here. I did a quick smoke test and tested the tab behaviour which now appears to be normal. Great, thanks!

Will this make it into v5.1?

[liamdebeasi]

That’s the current plan 😄