Material-ui: Grid direction "column" just became even more unpredictable in new Chrome version

[jarommadsen]

Chrome updated to v76.0.3809.132 on Aug 26th, 2019. This has caused a lot of strange behavior with sizing I've noticed but in particular with Grid's using direction="column".

Most notable was with a contact form that had some full width fields in it. When you started typing your email address, the validator would add helper text telling you if it was a correct email address or not. For some reason, the helper text styling caused all of the other fields to shrink in size when hovered over.

This behavior does not occur for direction="row" with xs={12} but occurs with or without breakpoints using "column"/"column-reverse".

I could not find any noticeable changes in the element styling and so I chalked it up to be a new bug introduced by Chrome as I can not reproduce the issue in Firefox. That said, the documentation for the Grid component states that direction "column"/"column-reverse" causes unpredictable behavior when using breakpoints but it appears that that unpredictability has just increased even further.

Possibly caused by this commit. Honestly a shot in the dark but it seemed the only change in this version that seemed relevant to my issue.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Grid items shrink to min-content rather than staying at 100% width like before.

Expected Behavior 🤔

Grid items should maintain their width when using direction="column" and no breakpoints.

Steps to Reproduce 🕹

CodeSandBox Reproduction

Steps:

1. Open the live example link in Chrome v76.0.3809.132.
2. Observe that hovering over fields does not change width.
3. Click "Add Helper Text" button.
4. Hover over fields.

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.4.0 |
| React | v16.8.6 |
| Browser | Chrome v76.0.3809.132 |

[oliviertassinari]

Could it be a duplicate of #16912?

[amacwhirter]

I have a similar issue after upgrading to latest Chrome version.

Buttons initially render centered in component, but when clicked, they shift left to min-content instead of keeping full width.

[oliviertassinari]

Let's see if the issue get solved in Chrome v77. Can somebody try the latest version?

[liywjl]

It appears to be resolved in v77 on my end

[amacwhirter]

My issue resolved in v77 as well

[anthonyferreol]

The bug is back even on v77...

[liywjl]

The bug is back even on v77...

@anthonyferreol I haven't been able to replicate. Could you post the full version?
I am running it on Version 77.0.3865.90

For those who want a temp work around, setting width: '100%' for the components affected resolves the issue

[jarommadsen]

@liywjl I have updated to v77.0.3865.90 as well but the code sandbox I have above still has the same issue as described in my original reproduction steps. ~Is it possible that the sandbox is emulating an older version?~

I'll double check in my project proper but I've just been adding direction="row" xs={12} to the grids that are being shrunk.

Update: Yes, this is still present even in my live project.

[liywjl]

I think we should reopen this ticket, your sandbox shows the issues still persisting

[oliviertassinari]

I have seen Chromium revert the fix as it was breaking Wordpress. I doubt we have any leverage here.

[jarommadsen]

@oliviertassinari Would a doc update be appropriate? It's already partially discouraged to use direction="column" but under limitations using breakpoints. It seems like direction="column"'s most useful feature is just padding between rows... which seems overboard for using display: 'flex' anyway.

[oliviertassinari]

I hope Chrome will find a solution to the problem. I would imagine many other website impacted. I feel like we need to run a new iteration of the Grid component.