Monaca Onsen UI Discord Chat Github Repo

Using React Tabbar disables page clicks

  • I’m ussing the <Ons.Tabbar /> in my app and whenever I add it I can no longer get any onClick events to fire nor can I scroll if the content exceeds the page height. I noticed that the Tabbar component consumes the whole page height and with a higher z-index. Here is how I’ve got it implemented for the layout:

    return (
        <Ons.Tabbar position="bottom" renderTabs={this.renderTabs} />
         <!-- the onClick does not get fired or I can not scroll when the tabbar is in the component -->
        <div onClick={this.handleClick}>Click me Seymour, click me...</div>

    Is this a bug or do I have it setup incorrectly?

  • Onsen UI

    @Rob-Rothe That’s not correct, the Tabbar should be inside the Page. You can see an example here: