Tabs: Cannot set the index of tab programmatically.

[jstralko]

When trying to set the index of tab programmatically from componentDidMount the Tab indicator doesn't change.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When changing the index in state the Tabs component should update the indicator.

Current Behavior

The indicator doesn't change even when the render is called again with the correct index from state.

Steps to Reproduce (for bugs)

Here is a codesandbox.io:

https://codesandbox.io/s/ykn36kzyj

The indicator should be set for index 1 but the indicator is set to index 0.

This worked earlier, I noticed this issue when I updated material-ui to beta-17

Context

Your Environment

Tech	Version
Material-UI	1.0.0.Beta17
React	16.0.0
browser	Chrome

[jstralko]

looks like if I wrap the this.setState({index}) around a setTimeout it works.

setTimeout(()=>this.setState({index}), 0)

[mpaarating]

While I've not found an explicit reason as to why, there seems to be timing issues with rendering and using setState inside of componentDidMount. The general recommendation is to not use setState inside of componentDidMount (so much so, that eslint has a rule against it.

[oliviertassinari]

This issue is definitely tricky. Thanks, @jstralko for the reproduction example. I have found a fix.

[jstralko]

Thank you for the quick fix. Great work.