when set state on selected, tabs dont change

[shangsunset]

So, when i try to so this.setState({}) on select, the code in handleSelected will be executed but the tabs will stop changing.

  handleSelected(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
    if (index == 1) {

      console.log(index);
      this.setState({paymentType: 'paypal'})
    }
    else {

      this.setState({paymentType: 'creditcard'})
    }
  }

[austinknight]

Same for me too. It works if I only have one setState call within my handle click function, but once I add two or more it fails to switch tabs.

[austinknight]

I ended up wrapping the functionality I wanted to execute within my handleSelected function in a setTimeout of 0 and the tabs changed as expected and executed everything inside.

[otmjka]

The same situation.

[mcohoon]

@austinknight can you provide more detail on your solution. I am new to React/JavaScript and I have run into the same issue.

Updated:
After trying a few things I got the following to work:

handleSelected(index, last) {
  console.log('Selected tab: ' + index + ', Last tab: ' + last);
  if (index == 1) {
    setTimeout(wrap(this.setState({paymentType: 'paypal'})), 0);
  }
  else {
    setTimeout(wrap(this.setState({paymentType: 'creditcard'})), 0);
  }
}

@austinknight is this what you meant?

[joepvl]

You can always work around this by using Tabs as a controlled component, e.g.:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedIndex: 0
    };

    this.handleSelected = this.handleSelected.bind(this);
  }

  handleSelected(index, last)  {
    this.setState({
      selectedIndex: index,
      //...otherStateUpdates
    });
  }

  render() {
    return <Tabs
      onSelect={ this.handleSelected }
      selectedIndex={ this.state.selectedIndex }
    >
      { /* <TabList>, <Tab>s, <TabPanel>s */ }
    </Tabs>
  }
}

That said, this is a bug, or at least it seems like unintended behaviour from reading the docs and the source. There seems to be a race condition relating to setState's async nature. I've started investigating this, so more to follow. In the mean time, a reproduction can be found here: http://jsbin.com/patociheze/1/edit?js,console,output. I've also written a failing test, but not sure how to proceed. I'll probably make a PR with that tomorrow to get feedback.

[nicotroia]

Has this been fixed? I'm on 0.8.2 and still running into this issue... using a setTimeout isn't working either

[joepvl]

@nicotroia can you provide some example code that shows what you're trying to accomplish? I just tried the focus example with 0.8.2 and it seems to work fine.

[nicotroia]

@joepvl It was a syntax error within the same parent component that decided not to throw any errors or warnings. Everything works now, thanks 👍

[joepvl]

Excellent. 🙂