Using React Tabbar disables page clicks

Rob Rothe

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

Fran Diox

@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

Using React Tabbar disables page clicks browsing