Below is a simple example of a Tabbar with three tabs. On the second one, I use a state variable to switch between two components when rendering. If I browse between the three tabs, everything looks ok. But once I switch the components in tab number two (by first clicking the floating button, and then the Back button), the tabbar does not work correctly. If I do this and go back to Page 1 it looks as it navigates to Page 1, but it still shows the content of Page 2. If I switch and go to Page 3 though, it works fine. Also, If I do the switch in Page 2, go to Page 1 and then click a little back and forth between the pages it starts working again.
It seems it starts working when I go from one page to a page with a higher index (that's why it's working when going directly to Page 3).
Am I doing something wrong, or is this a bug in Onsen UI?
Here is the sample code (I am using Meteor, React and Onsen UI):
import React, { Component } from 'react';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import ons from 'onsenui';
import {Page,Tabbar, Tab,Toolbar, Fab, BackButton, Icon} from 'react-onsenui';
export default class App extends Component {
constructor() {
super();
this.state = {index: 0};
}
renderTabs() {
return [
{
content: <Page1 key="t1"/>,
tab: <Tab label='Page1' key="b1" />
},
{
content: <Page2 key="t2"/>,
tab: <Tab label='Page 2' key="b2" />
},
{
content: <Page3 key="t3"/>,
tab: <Tab label='Page 3' key="b3" />
}
];
}
render() {
return(
<Tabbar
index={this.state.index}
onPreChange={(event) =>
{
if (event.index != this.state.index) {
this.setState({index: event.index});
}
}
}
renderTabs={() => this.renderTabs()}
/>
);
}
}
class Page1 extends Component {
render() {
return (
<Page>
<div>Page 1</div>
</Page>
);
}
}
class Page2 extends Component {
constructor() {
super();
this.state = { showTest: false};
}
showTest(show) {
this.setState({showTest: show});
}
render() {
return (
this.state.showTest ?
<Show2 showTest={(show) =>this.showTest(show)} />
:
<Show1 showTest={(show) =>this.showTest(show)} />
);
}
}
class Show1 extends Component {
renderToolbar() {
return (
<Toolbar>
<div className='center'>Show 1</div>
</Toolbar>
);
}
renderFixed() {
return(
<Fab position="bottom right" onClick={() => this.props.showTest(true)}><Icon icon='md-plus'/></Fab>
);
}
render() {
return (
<Page renderToolbar={this.renderToolbar} renderFixed={() => this.renderFixed()}>Show 1</Page>
);
}
}
class Show2 extends Component {
renderToolbar() {
return (
<Toolbar>
<div className='left'><BackButton onClick={() => this.props.showTest(false)}>Back</BackButton></div>
<div className='center'>Show 2</div>
</Toolbar>
);
}
render() {
return (
<Page renderToolbar={() => this.renderToolbar()}>Show 2</Page>
);
}
}
class Page3 extends Component {
render() {
return (
<Page>
<div>Page 3</div>
</Page>
);
}
}
