[input] Fix layout shift with display: flex by oliviertassinari · Pull Request #43839 · mui/material-ui (original) (raw)

Fix #39539. A regression introduced in Chrome #26449 (comment) after #28070.

As an end-user, I was annoyed by #39539 (comment), the template doesn't feel great with a bug like this. It makes us look like amateurs.

You can test that is works on https://deploy-preview-43839--material-ui.netlify.app/experiments/base/autofill/.

Screen.Recording.2024-09-22.at.01.44.40.mov

and https://deploy-preview-43839--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/.

TODO

• Regarding [InputBase] Fix autofill issue #28070 I'm not sure what happened but emotion doesn't removed empty keyframe with the version that we have today:
• @emotion/styled@11.13.0
• @emotion/react@11.13.3

The reproduction in #26449 uses:

• https://unpkg.com/@emotion/styled@11.3.0/dist/emotion-styled.cjs.prod.js
• https://unpkg.com/@emotion/react@11.4.0/dist/emotion-react.cjs.prod.js

To dive deeper, don't want to merge without clarity on this.

• Is this still the best way to solve this problem?