[TextField] Autofill detection not working in production

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.

[michal-perlakowski]

@eps1lon This is a different issue. My issue is about the shrunk state of the label, and the linked issue is about onChange event handler.

[eps1lon]

Duplicate of https://github.com/mui-org/material-ui/issues/22488