[InputBase] Fix autofill issue #28070

mnajdova · 2021-08-31T10:41:17Z

1. Autofill detection not working in production

The empty keyframes are being removed in production by emotion. Adding an from { display: 'block' } fixes the issue. I've decided to go with this style, as it is already defined in the styles for the InputBase component.

2. TextField rerendering causes global styles to recalculate on each keystroke with `styled-components`

Fixes #28051

The GlobalStyles are now hoisted in a static variable, as otherwise the <style> tag redraw on each keystroke when the Input component is rendered for example as a callback, see #28051

Reproduction and verification of the fixes

Auto fill issue

Steps:

Enter email and password
Save when propt by the browser
Refresh the page

Previous:
Codesandbox link: https://codesandbox.io/s/ecstatic-wilbur-710ny?file=/src/App.js
Production build link: https://csb-710ny.netlify.app/?

Now:

Codesandbox link: https://codesandbox.io/s/upbeat-dream-5nttz?file=/package.json
Production build link: https://csb-5nttz.netlify.app/?

styled-components redraw <style> tag on each keystroke
Previous:
https://codesandbox.io/s/styled-components-forked-crstj?file=/src/demo.jsx

Now:
https://codesandbox.io/s/styled-components-forked-gwepq?file=/src/demo.jsx

mui-pr-bot · 2021-08-31T10:43:30Z

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 01d62f7

packages/material-ui/src/InputBase/InputBase.js

…va/material-ui into feat/input-base-auto-fill

eps1lon

Seems like this is a footgun for GlobalStyles in general with styled-components.

We should document this for GlobalStyles. Have you checked the other uses of GlobalStyles in the codebase?

Do both issues require this complete change or did you group two changes that can independently fix either issue?

packages/material-ui/src/InputBase/InputBase.js

mnajdova · 2021-09-01T09:03:23Z

Seems like this is a footgun for GlobalStyles in general with styled-components.

Not sure what we can do about this.. :\

We should document this for GlobalStyles. Have you checked the other uses of GlobalStyles in the codebase?

This and the CSSBaseline are the only components that use GlobalStyles. With the CSSBaseline it should not be a big problem I think, but in the InputBase is more obvious, as it is used much more, and it is more dynamic...

About the documentation, agree, I will create a PR with a note in the documentation for the GlobalStyles used with styled-components.

Do both issues require this complete change or did you group two changes that can independently fix either issue?

I've grouped the two changes, mostly because they are both affected by the global styles and they are both part of the v5 milestone.

eps1lon · 2021-09-01T09:26:42Z

I've grouped the two changes, mostly because they are both affected by the global styles and they are both part of the v5 milestone.

Ok. Could you make it obvious in the PR description which change fixes which problems? I'd have to guess right now but guessing is risky long-term.

mnajdova · 2021-09-01T09:32:26Z

Ok. Could you make it obvious in the PR description which change fixes which problems? I'd have to guess right now but guessing is risky long-term.

Sure, makes sense. Updated.

siriwatknp

👍

eps1lon · 2021-09-01T10:54:28Z

packages/material-ui/src/InputBase/InputBase.js

  return (
    <React.Fragment>
-      <GlobalStyles
-        styles={{


Just learned that @babel/plugin-transform-constant-elements deopts mutable props. This unlocks a bunch of optimizations actually since we treat props as immutable all the time. Will investigate in a follow-up.

bryan-hunter · 2021-10-13T19:50:48Z

@mnajdova stumbled across this PR when searching.

Our app is rendering a lot of text fields at once and this is injecting a global style in the <head> for each one and removing them when unmounted.

This is causing an initial render performance issue when the number of text fields to render at once is pretty big.

Is there any way to make this only inject once?

mnajdova · 2021-10-20T09:12:15Z

Is there any way to make this only inject once?

Sorry for the late response @bryan-hunter . We want the components to be able to be used in isolation without needing to setup anything else so by default I don't think so. Maybe we could add a property on the component that if set, would just not render the global styles, assuming the developers already rendered those at the top of their App. Would something like this work for your team? Would you like to submit a PR?

Also would be useful to see some benchmark that would show the perf difference we would have with this.

bryan-hunter · 2021-10-21T19:39:19Z

Is there any way to make this only inject once?

Sorry for the late response @bryan-hunter . We want the components to be able to be used in isolation without needing to setup anything else so by default I don't think so. Maybe we could add a property on the component that if set, would just not render the global styles, assuming the developers already rendered those at the top of their App. Would something like this work for your team? Would you like to submit a PR?

Also would be useful to see some benchmark that would show the perf difference we would have with this.

I will attempt a PR now :)

I patched material-ui to remove the GlobalStyle and added it to createTheme with

MuiCssBaseline: {
            styleOverrides: `
                @keyframes mui-auto-fill{from{display:block;}}
                @keyframes mui-auto-fill-cancel{from{display:block;}}
                `,
        },

if anyone needs a solution in the interim

jedwards1211 · 2025-05-27T04:58:57Z

@mnajdova Is there no performant way for Inputs to query the document to see if a needed global style tag has already been added? That would be one way to keep the component working in isolation without adding hundreds of redundant style tags.

Honestly if there were no better options I would be happier to see monkeypatching like if (!document.__MUI_injected_InputBase_global_styles__) { ... } than performance tanking by default on just a few hundred Inputs mounting at once.

Fix autofill issue

c1da9c6

mnajdova commented Aug 31, 2021

View reviewed changes

packages/material-ui/src/InputBase/InputBase.js Outdated Show resolved Hide resolved

mnajdova added 3 commits August 31, 2021 13:13

Update packages/material-ui/src/InputBase/InputBase.js

4f9d945

Use React.memo

ed81296

Merge branch 'feat/input-base-auto-fill' of https://github.com/mnajdo…

daa0a0e

…va/material-ui into feat/input-base-auto-fill

mnajdova marked this pull request as ready for review August 31, 2021 12:07

mnajdova requested review from eps1lon and oliviertassinari August 31, 2021 12:07

oliviertassinari added type: bug It doesn't behave as expected. scope: text field Changes related to the text field. labels Aug 31, 2021

eps1lon requested changes Sep 1, 2021

View reviewed changes

packages/material-ui/src/InputBase/InputBase.js Outdated Show resolved Hide resolved

Merge branch 'next' into feat/input-base-auto-fill

bf435d2

Sebastian's review

01d62f7

mnajdova requested a review from eps1lon September 1, 2021 09:40

github-actions bot mentioned this pull request Sep 1, 2021

Update snapshots for pr/28070 eps1lon/mui-scripts-incubator#3029

Closed

mnajdova mentioned this pull request Sep 1, 2021

[docs] Add a recommendation for hoisting GlobalStyles to static constant #28088

Merged

siriwatknp approved these changes Sep 1, 2021

View reviewed changes

eps1lon reviewed Sep 1, 2021

View reviewed changes

eps1lon approved these changes Sep 1, 2021

View reviewed changes

mnajdova merged commit 9831c8c into mui:next Sep 1, 2021

bryan-hunter mentioned this pull request Oct 21, 2021

[InputBase] Add prop for disabling global styles #29213

Merged

1 task

mnajdova mentioned this pull request Mar 2, 2022

Mui components generating too much style tags #30892

Closed

2 tasks

josepharhar mentioned this pull request Oct 20, 2023

[text field] InputBase Auto-fill keyframes may cause unwanted animations #39539

Open

mj12albert mentioned this pull request Oct 31, 2023

[material-ui][docs][TextField] Add a performance section #39681

Closed

oliviertassinari mentioned this pull request Sep 21, 2024

[input] Fix layout shift with display: flex #43839

Open

2 tasks

Uh oh!

[InputBase] Fix autofill issue #28070

[InputBase] Fix autofill issue #28070

Uh oh!

Conversation

mnajdova commented Aug 31, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. Autofill detection not working in production

2. TextField rerendering causes global styles to recalculate on each keystroke with styled-components

Reproduction and verification of the fixes

Uh oh!

mui-pr-bot commented Aug 31, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

eps1lon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mnajdova commented Sep 1, 2021

Uh oh!

eps1lon commented Sep 1, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mnajdova commented Sep 1, 2021

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

eps1lon Sep 1, 2021

Choose a reason for hiding this comment

Uh oh!

bryan-hunter commented Oct 13, 2021

Uh oh!

mnajdova commented Oct 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bryan-hunter commented Oct 21, 2021

Uh oh!

jedwards1211 commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

mnajdova commented Aug 31, 2021 •

edited

Loading

2. TextField rerendering causes global styles to recalculate on each keystroke with `styled-components`

mui-pr-bot commented Aug 31, 2021 •

edited

Loading

eps1lon commented Sep 1, 2021 •

edited

Loading

mnajdova commented Oct 20, 2021 •

edited

Loading

jedwards1211 commented May 27, 2025 •

edited

Loading