[TextField] Autofill detection not working in production

[michal-perlakowski]

In production, the TextField label is not shrunk when using autofill:

Demo: https://jsfiddle.net/284y3evu/
Steps to reproduce:

1. Fill in the form and click submit.
2. Choose to save the password in browser.
3. Go back in the iframe, or refresh the page.
4. Use the autofill.

It works fine with development bundles. Same demo, with only Emotion and Material-UI changed to development versions: https://jsfiddle.net/284y3evu/1/

The cause of this issue seems to be that in production the @keyframes mui-auto-fill declaration is removed from the styles. Adding some styles to the keyframes (InputBase.js:488) fixes the issue, for example:

<GlobalStyles
    styles={{
        '@keyframes mui-auto-fill': { '100%': { display: 'block' } },
        '@keyframes mui-auto-fill-cancel': { '100%': { display: 'block' } },
    }}
/>

But perhaps there's a better solution. Maybe somthing can be changed in Emotion configuration.

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

[stass-1]

This issue still reproducing
"@material-ui/core": "5.0.0-alpha.38", "@material-ui/styles": "5.0.0-alpha.36", "@emotion/react": "^11.0.0", "@emotion/styled": "^11.0.0",

[liho98]

why are you closing this issue, that #22488 issue has been closed, its not duplicate, dont you even try the author's code? before closing this issue, OMG.... Please reopen it. Its critical bug on production, my version is @material-ui/core": "5.0.0-alpha.31, I did try update to latest version, same result.

Duplicate of #22488

local development

production build

[mnajdova]

Thanks for the report. Initially, the keyframes had the from: {} in them, I propose we add the same. This diff is fixing the issue:

index 1dcc7687c3..ceff2a66a0 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -485,8 +485,8 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
     <React.Fragment>
       <GlobalStyles
         styles={{
-          '@keyframes mui-auto-fill': {},
-          '@keyframes mui-auto-fill-cancel': {},
+          '@keyframes mui-auto-fill': { from: {} },
+          '@keyframes mui-auto-fill-cancel': { from : {} },
         }}
       />
       <Root

---

My bad, was testing in dev mode 🤦 This didn't help as well, so I propose we go with:

index 1dcc7687c3..ceff2a66a0 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -485,8 +485,8 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
     <React.Fragment>
       <GlobalStyles
         styles={{
-          '@keyframes mui-auto-fill': {},
-          '@keyframes mui-auto-fill-cancel': {},
+          '@keyframes mui-auto-fill': { from: { display: 'block' } },
+          '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },
         }}
       />
       <Root

We already have that as a style on the InputBaseComponent, so it should be safe.

[josepharhar]

I recently made the display property animatable in chrome, so the fix is now starting unwanted animations in stable chrome

• https://chromestatus.com/feature/5154958272364544
• https://bugs.chromium.org/p/chromium/issues/detail?id=1492888#c12

I filed an issue here: #39539

I think that switching from display to a different non-animatable property like animation-name would fix it.