bug: Ion-tabs error: Cannot read property 'getActiveStackId' of undefined

[Ajax-ua]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

Using getSelected() method of ion-tabs component throws an error "Cannot read property 'getActiveStackId' of undefined"

Expected behavior:

getSelected() method of ion-tabs component should return selected tab

Steps to reproduce:

Use ion-tabs component and call getSelected() method.

Related code:

<ion-tabs #tabs>
      {{tabs.getSelected() | json}}

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.15 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.3.23
   @ionic/angular-toolkit        : 2.1.2

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Utility:

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

System:

   NodeJS : v12.6.0 (/usr/local/bin/node)
   npm    : 6.13.6
   OS     : macOS Catalina

[NikolaPeevski]

@Ajax-ua Do you have @ViewChild('tabs', { static: true, read: IonTabs }) private tabsRef: IonTabs;

as a local property of the component for that template ? Also just a general tip, avoid binding functions to templates directly, it causes a lot of calls when the view gets repainted :)

[Ajax-ua]

@NikolaPeevski I didn't have local property via ViewChild decorator and it works correctly on Ionic 4. However I've tried to use it with Ionic 5 but I still get the same error

[NikolaPeevski]

@Ajax-ua Can you provide a repo that consistently yields this problem?

[Ajax-ua]

@NikolaPeevski please check: https://github.com/Ajax-ua/ionic5-tabs By the way, when I call this method in component then there is no error but it still doesn't work and returns undefind.

[NikolaPeevski]

@Ajax-ua Okay, so the way tabs work is that they use a stack controller to retain tab history. This controller gets initialised when an component with a ion-tabs is created. Since you're binding the getSelected() to either the template/ngOnInit you're getting this issue because you're trying to call getSelected() while the controller is being initialised. It does not take much to initialise, it's quite instant, but in this instant the tabs html page and it's component are also rendered/created. If you were to write

setTimeout(() => {console.log(this.tabsRef.getSelected())}, 1500)

in the ngOnInit of the tabs page you'll get your result. Of course this is an over-exaggerated timeout value, you could try ngAfterViewChecked instead if you want, but I hope it clarifies the confusion. You can read a little bit more about lifecycle hooks here.

[Ajax-ua]

@NikolaPeevski thanks for your answer! Calling method in ngAfterViewChecked returns undefined. As well as in ngAfterViewInit hook. I've achieved an expected result using ionViewDidEnter hook. So I can solve my problem using it. However, I think that the tabs behavior isn't clear and it should be at least described in the documentation

[NikolaPeevski]

You can rename this issue and/or close it and reference it in a new issue here https://github.com/ionic-team/ionic-docs since it's not a bug.

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