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

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

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 33 (4 by maintainers)

Most upvoted comments

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;
  }

KindTech on Sep 27, 2017

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

davidst2017 on Mar 14, 2018

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');
	}

kamran377 on Jun 7, 2018

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.

epetre on Jan 25, 2018

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 😉

HugoHeneault on Jan 18, 2018

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

KindTech on Oct 6, 2017