Monaca Onsen UI Discord Chat Github Repo

Tabbar



  • I’m attempting to create a tabbar with 4 tabs. If I specify the content for all four, then it initially displays correctly, but then perhaps a half-second later it displays an error: TypeError: el._show is not a function. The location in code is:

    P:/core/src/elements/ons-tabbar/index.js:570
    
      567 |     const activeIndex = this.getActiveTabIndex(tabs);
      568 |     this._loadInactive.resolve();
      569 |     if (tabs.length > 0 && activeIndex >= 0) {
    > 570 |       tabs[activeIndex].loaded.then(el => el && setImmediate(() => el._show()));
      571 | ^   }
      572 |   });
      573 | }
    

    Curiously, if I omit the content attribute for any one of the four tabs, then the error doesn’t occur. (If I remove it for the first tab, then the content becomes misaligned, but without the error message.)

    I’ve simplified my Tabbar to this, and I’m still getting the incorrect behavior:

        <Tabbar
            renderTabs={() => [
                {
                    key: 'Home',
                    tab: <Tab label="Dashboard" icon="ion-md-stats" />,
                    content: <p>Dashboard</p>
                },
                {
                    key: 'Items',
                    tab: <Tab label="Items" icon="ion-md-pricetag" />,
                    content: <p>ItemsMenu</p>
                },
                {
                    key: 'Cart',
                    tab: <Tab label="Cart" icon="ion-md-cart" />,
                    content: <p>Cart</p>
                },
                {
                    key: 'Settings',
                    tab: <Tab label="Settings" icon="ion-md-settings" />,
                    // content: <p>Settings</p> // Comment this to prevent error
                }
            ]}
        />
    

    Do you have any idea what’s going wrong here?