Ionic-framework: Tabs.select(idx), receive error "Cannot read property 'length' of null"

[KindTech]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When setting a tab programmatically via Tabs.select(idx), receive error "Cannot read property 'length' of null" at Tab.NavControllerBase.getActive at Tabs.select

If change tabs by tapping the tab it works fine.

Difficulty: it only happens on first open of the app after clean install. If I close the app and reopen it works fine. Happens on both IOS and Android. Not encountering any other errors prior to it.

Expected behavior:
It should change the tab.

Steps to reproduce:

Related code:

relevant code on child of tabs

@IonicPage({ priority: 'high'})
@Component({
  selector: 'page-businesses-page',
  templateUrl: 'businesses-page.html',
  encapsulation: ViewEncapsulation.None,
  providers: [MapPinService]
})
...
export class BusinessesPage {
...
@ViewChild(Content) content: Content;
  constructor(
...
private navCtrl: NavController,
private evts:Events
...
)
...
ngOnInit(): void {
...
    this.evts.subscribe('tabs:changetab',(data)=>{

        var t: Tabs = this.navCtrl.parent;
        t.select(data.tabIndex);

    });
  }

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (c:\ProjectCode\app\main\node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.0

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.1.1

System:

    Node : v7.4.0
    OS   : Windows 10
    npm  : 4.1.1

[mastronaute]

Same here, only difference is that I use @ViewChild(Tabs) tabs: Tabs;

[mastronaute]

After debugging it looks like in the function Tabs.prototype.select the following call is made currentPage = currentTab.getActive();
Details of this function is:

NavControllerBase.prototype.getActive = function () {
        return this._views[this._views.length - 1];
    };

In my case, this._views is null

[dbachorz]

I have the same problem. Any more ideas?

[jgw96]

Hello all, thanks for using Ionic! We will look into this.

[zamecki]

I manage to get it working with @ViewChild('myTabs') tabs: Tabs;

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Cadastro" tabIcon="magnet"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Listagem" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Sobre" tabIcon="information-circle"></ion-tab>
</ion-tabs>

import { NavController, Platform, Tabs } from  'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  @ViewChild('myTabs') tabs: Tabs;

  tab1Root: any = CadastroPage;
  tab2Root: any = ListagemPage;
  tab3Root: any = SobrePage;

  constructor(private nav: NavController,
              private platform: Platform) {      
      platform.registerBackButtonAction(
        () => {
          if(nav.canGoBack()){
            nav.pop();
          }else {        
            this.tabs.select(0);
          }
        }
      );
  }
}

cli packages: (E:\RV\node_modules)

    @ionic/cli-plugin-cordova       : 1.6.1
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-plugin-proxy         : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3 browser 4.1.0
    Ionic Framework    : ionic-angular 3.5.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.10.3
    OS                : Windows 10
    npm               : 5.2.0

[mastronaute]

I made some upgrades this morning and it does work now on my side too:

cli packages: 
    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.2.1

[KindTech]

Tried switching to ViewChild as per zamecki. I still have the issue on first open after clean install. Closing and reopening app fixes it.

[zamecki]

@KindTech Could you post some code?

[stellasoft-charlie]

Any progress on this? Could really do with a fix

[KindTech]

I was unable to post code due to project deadlines. I worked around it by calling a click event on the tab button directly.

[mastronaute]

Very problematic for us too

[mastronaute]

@KindTech How did you processed exactly ? Could you provide some code please ? That would help a lot.

[akashbiz]

+1 , facing same issue. Any updates?

[KindTech]

as noted, I worked around it by using an event and calling the click event on the actual tab. I'm not happy about it but was under deadline. Note, if you use an event, you have to subscribe on the tabs page because the child pages may not have loaded yet and in that case will not be able to receive the event.

In my tabs page:

export class TabsPage {

@ViewChild('tabs') tabs:Tabs;

  shareTabRoot: any = SharePage;
  subscribeTabRoot: any = SubscribePage;
  listTabRoot: any = BusinessesPage;

  mySelectedIndex: number;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private evts:Events,
    private renderer:Renderer
  ) {
    this.evts.subscribe('tabs:changetab',(data)=>{        

        try{
          this.tabs.select(data.tabIndex);
        }
        catch(ex){
          //HACK: this sucks a lot. For some reason on first load of the app,
          //the views are not loaded into the ViewControllerBase. It's a bug in ionic.
          //This causes tabs.select to fail.
          //as a recourse, I am calling the click method on the actual tab element
          //this is totally brittle and likely to break in a subsequent release of ionic.
          //sorry.
          let tabid = 'tab-t1-'+data.tabIndex;
          document.getElementById(tabid).click();
        }
      this.mySelectedIndex = data.tabIndex;
    });
    this.mySelectedIndex = navParams.data.tabIndex || 0;
  }

[mastronaute]

@KindTech thank you very much, I was struggling with the click method

[danbucholtz]

Hello,

I cannot recreate this. Can someone post a minimal sample project that shows the issue? I will fix it right away then.

Thanks,
Dan

[KindTech]

This shouldn't be closed. There are at least five users noting the issue. Did you deploy it to an actual device? As I noted, it only happens on the first open of a clean install of the app.

[mastronaute]

@danbucholtz I totally agree with @KindTech this cannot be closed as the error it is still going on. And indeed for me it only happens on mobile (iOS actually, never tried on Android) the first time I launch the app.

[kensodemann]

@KindTech & @royalcheeseburger - can one of you help us out by posting a minimal sample application that demonstrates the issue on GitHub? It would probably also help to trim the README in the repo down to very explicit instructions on how to reproduce the issue as it seems this seems to only happen under very specific conditions. We will be more than happy to re-open and fix this issue once it can be duplicated.

[mastronaute]

@kensodemann here it is : https://ionic-7g8dni.stackblitz.io
When you run the app for the first time. That is actually kind of strange because I could not reproduce it but I have been prompted for a Ionic update. It might be corrected now... the fact is that I was still having the issue a few days ago... I try again and let you know

[KindTech]

I'll try to put together a minimal app this weekend.

[anddorua]

I had similar issue when subscribed in ngOnInit to my context changes containing tab index required to select. The issue appears after I switch root nav controller from tabs page to usual single page and back. Looks like during this operation tabs page was destroyed but subscription stays alive and next time context changes it tries to switch tab of destroyed tabs controller. The solution was to unsubscribe in ngOnDestroy from all subscriptions in my Tabs page. I hope it will help you.

[loffler]

@danbucholtz hey, I'm not perfectly sure if mine is the same bug as OP reported, but here I made a sample repo

[stellasoft-charlie]

@danbucholtz now Loffler has left a sample repo, are you willing to re-open and take a look at it? I too get the same issue as loffler

[ghost]

@danbucholtz

To make a place holder. I tried to dynamically remove a tab and got the same error.

1, Place a tab and two buttons onto the screen (add and remove).
2, Click on add, which is adding a tab. (by this.tabs.push)
this.tabRef.add(Tab) Tab has got 14 arguments, so i have avoided...Have you heard about Hammurabi, which allows only 7 parameters of a constructor?
3, Click on remove, which is removing the tab (by this.tabs.pop)

You might need to include setTimeout to trigger the update.

<ion-tabs #multi_tab selectedIndex="0">
    <ion-tab *ngFor="let t of tabs" [root]="t.component" [rootParams]="t.param"></ion-tab>
</ion-tabs>

"tabs" is member variable
"multi_tab" is @ViewChild() tabRef

To clean up your tabs after removal, you need two lines:

this.tabs.pop();
this.tabRef._tabs.pop();

Ionic does not support dynamic removal of a tab. (there is add method, but there is no delete method in Tabs)

[aiyuzhou]

Did you guys find a solution to this issue? I have the bug now, it only happens on the first open of a clean install of the app, when I close the app, reopen it works.

[HugoHeneault]

I had the bug. @KindTech's solution is working fine. Even if it's really hacky.

Don't hope any fix from the ionic team, they are all focused on ionic4 with stencil ;)

[epetre]

In my experience, I think it has to do with Events.
Make sure that you are unsubscribing to those events in ngOnDestroy and subscribing on ngOnInit for me it fixed those errors.

[davidst2017]

@epetre yes you are right!!! thx for the hint!

[marzoukiniz]

@epetre could you post some code how to unsubscribing the events.

[kamran377]

In my case I was subscribing to an event in Tabs constructor, unsubscribing that event in ngOnDestroy worked like a charm for me. Here is the sample code for reference.

events.subscribe('form:completed', (index) => {
            this.tabsEnableArray[index] = true;
            this.tabRef.select(index);
        });

You have to unsubscribe all the events like this

ngOnDestroy()  {
        this.events.unsubscribe('form:completed');
    }

[DuaneQ]

I applied @KindTech 's solution but I'm still having the same issue:
Cannot read property 'select' of null

The issue only happens on the initial login of the app...once it's closed and re-opened the issue doesn't appear.

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