Ionic-framework: bug: Tapping an active tab creates an unexpected behavior

[jayserdny]

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

[liamdebeasi]

Thanks for the issue. As a workaround, you can set the router direction to be forward before calling the router:

import { Router } from '@ionic/angular';
import { NavController } from '@ionic/angular';

...

constructor(
  private navCtrl: NavController,
  private router: Router
) {}

...

public navigate() {
  this.navCtrl.setDirection('forward');
  this.router.navigate(['/test']);
}

[liamdebeasi]

@jayserdny Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

[jayserdny]

Hello, yes! that fixed the issue :D thanks!

[wilk-polarny]

This is the same issue as #19943

Also, in my opinion the expected behaviour should be that tapping on an already open tab should navigate to the root tab component if the underlying outlet does not match the initial route of the tab.

Especially on iOS this is expected behaviour for tab buttons.
Also, some applications simply scroll to the top if there is only a single "page" within a tab, instead of a navigation history.

Please do not remove this, or consider expected iOS behaviour when making changes 😨

The only thing that is currently off, is the behaviour when tapping an already active tab button with it's root component already in place. It somehow breaks the routing, as mentioned in #19943

In Angular, the navigation direction will show wrong as mentioned by @jayserdny, and the root component of the selected tab will be destroyed upon leaving/navigating within the tab (and thus the back button disappears).

[liamdebeasi]

@wilk-polarny Did you try the dev build in https://github.com/ionic-team/ionic/issues/21074#issuecomment-616695624? What you described is what the dev build will do.

If you are on a child page of an active tab, tapping the tab will take you back to the root tab page. Tapping a tab while already on the root tab page will do nothing (instead of breaking).

[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 😄

[sfrinx]

I try this and for me not work: npm i @ionic/[email protected].
When you suppose to release 5.1 version?

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21085, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.