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 (
      <div>
        <Ons.Tabbar position="bottom" renderTabs={this.renderTabs} />
        <Ons.Page>
         <!-- 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>
        </Ons.Page>
      </div>
    )
    

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


  • Onsen UI

    @Rob-Rothe That’s not correct, the Tabbar should be inside the Page. You can see an example here: http://tutorial.onsen.io/?framework=react&category=reference&module=tabbar