TextField causes scrollbar flickering when focused in a form dialog

[alex996]

In v1.0.0-beta.45 and onwards, when a text field in a form dialog gets focused, it causes a horizontal scroll bar to pop up and flicker for a moment. Looks like the issue is caused by #11215, as it doesn't happen in v1.0.0-beta.44.

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

Expected Behavior

To not flicker a horizontal scrollbar.

Current Behavior

Flickers a horizontal scrollbar for a moment.

Steps to Reproduce (for bugs)

Reproducible within a form dialog in the current docs. I forked the example and added @babel/runtime on CodeSandbox.

1. Click "Open Form Dialog"
2. Unfocus the TextField by clicking outside
3. Focus the TextField
4. Observe the scrollbar flicker

Tech	Version
Material-UI	next
React	16.3.2
browser	Chrome 66

[oliviertassinari]

@alex996 Thanks for raising, it's a second side effect of #11215. I think that we should revert this time. cc @pandaiolo.

[pandaiolo]

@oliviertassinari is this is due to the label shrinking being animated, and not the width style? Would you like a PR applying the same transition to that property?

[oliviertassinari]

@pandaiolo I haven't thought of animating the width. Maybe that can work. Your call.

[danjenson]

This is still an issue for me -- I have a text field in a Grid item and every time I focus or unfocus it and the label shifts, the scrollbar flickers and the page shifts jitters left and right.