[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

@@ -483,12 +493,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {

  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

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 bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! 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

[material-ui][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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[InputBase] Fix autofill issue #28070

[InputBase] Fix autofill issue #28070

mnajdova commented Aug 31, 2021 •

edited

Loading

mui-pr-bot commented Aug 31, 2021 •

edited

Loading

eps1lon left a comment

mnajdova commented Sep 1, 2021

eps1lon commented Sep 1, 2021 •

edited

Loading

mnajdova commented Sep 1, 2021

siriwatknp left a comment

eps1lon Sep 1, 2021

bryan-hunter commented Oct 13, 2021

mnajdova commented Oct 20, 2021 •

edited

Loading

bryan-hunter commented Oct 21, 2021

[InputBase] Fix autofill issue #28070

[InputBase] Fix autofill issue #28070

Conversation

mnajdova commented Aug 31, 2021 • edited Loading

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

mui-pr-bot commented Aug 31, 2021 • edited Loading

eps1lon left a comment

Choose a reason for hiding this comment

mnajdova commented Sep 1, 2021

eps1lon commented Sep 1, 2021 • edited Loading

mnajdova commented Sep 1, 2021

siriwatknp left a comment

Choose a reason for hiding this comment

eps1lon Sep 1, 2021

Choose a reason for hiding this comment

bryan-hunter commented Oct 13, 2021

mnajdova commented Oct 20, 2021 • edited Loading

bryan-hunter commented Oct 21, 2021

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