focus is lost when using react-tabs as a controlled component

[mziwisky]

i tried using react-tabs as a "controlled component", a la https://facebook.github.io/react/docs/forms.html#controlled-components

for react-tabs to behave as a proper controlled component, the behavior i would expect is as such:

if you pass <Tabs> a selectedIndex property, then it will ALWAYS be respected. i.e., the prop is not used merely to determine which tab to render initially, it's used to determine which tab to render all the time. so even if a user clicks a tab, that tab won't be selected unless the parent component reacts to the click by changing the selectedIndex. therefore, onSelect gets invoked when a Tab is clicked or keyboard-navigated to, which allows the developer to update selectedIndex appropriately.

a minimal example is as follows:

var MyComponent = React.createComponent({
  getInitialState () {
    return { currentTab: 0 };
  },
  handleTabSelect (index) {
    this.setState({ currentTab: index });
  },
  render () {
    return (
      <Tabs
        selectedIndex={ this.state.currentTab },
        onSelect={ this.handleTabSelect }
      >
        <TabList><Tab>One</Tab><Tab>Two</Tab></TabList>
        <TabPanel><p>Content of first tab</p></TabPanel>
        <TabPanel><p>Content of second tab</p></TabPanel>
      </Tabs>
    );
  }
});

If you try it, this minimal example actually mostly behaves as expected, but the problem I discovered is if you focus one of the tabs and then use the arrow key to navigate to the other, the other tab gets selected but your focus is immediately lost. If you remove both of those props from <Tabs>, then this issue goes away, but now MyComponent isn't keeping track of the selected tab in its state. (In our particular case, we want MyComponent to keep track of that index because we sometimes programmatically select a different tab based on other things going on in the component.)

Also, if you change the example such that handleTabSelect doesn't update this.state.currentTab, then react-tabs still changes its selected tab anyway -- i.e. it ignores its selectedIndex prop.

So, what do you think? Does controlled component behavior make sense for react-tabs? Is it perhaps something that's already on the roadmap?

[OliverJAsh]

👍 !

[Acezhangloo]

@danez I believe currently when we switch tabs, the focus will still lost. Is this issue fixed?