[Tabs] Highlight underline wider that tab

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

Expected Behavior

Exact highlight underline alignment all the time (even after heat death of the universe).

Current Behavior

(In my app) after page reload the line goes under the second tab. It fixes itself on second render or on window resize.

Steps to Reproduce (for bugs)

I don’t have a small project to reproduce this. I made only this video https://streamable.com/swsom If you have no idea why it happens just close this issue (I will try to fix it later).

<Tabs
    indicatorColor="primary"
    textColor="primary"
    value={this.props.activeTab}
    onChange={this.onTabsChange}
    fullWidth
>
    <Tab label="Sign In" value="login" />
    <Tab label="Sign Up" value="register" />
</Tabs>

Your Environment

Tech	Version
Material-UI	1.0.0-beta.31
React	16.2.0
browser	Chromium 63.0.3239.132

[01e9]

This fixes the problem

action={(actions) => setTimeout(actions.updateIndicator.bind(actions), 0)}

---

This doesn’t

action={(actions) => actions.updateIndicator()}

[oliviertassinari]

How to trigger the recalculation/refresh of the components from code?

@arteniioleg Use the action property + updateIndicator(): https://material-ui-next.com/api/tabs/#tabs.