[TextField] Handle Chrome autofill #14427

garygrubb · 2019-02-06T03:12:58Z

There is a display issue in the TextField outlined variant when chrome pre-fills the text box on initial page load. The auto filled text overwrites the label. See below screenshot.

Also notice the yellow background for auto filled text, can it be overridden?

MUI version 3.9.2

oliviertassinari · 2019-02-08T17:17:23Z

This need to fix this problem! #14453 might provide some ways to address the problem.
@garygrubb I'm wondering, are you able to create a reproduction example that we can consistently use to solve the problem? Thank you! This looks very close to the Google main login form:

garygrubb · 2019-02-14T06:18:59Z

Sorry for the delayed response. I will try and create a small reproduction when time permits later this week. In the mean time I have a temporary fix in place - setting autoFocus on any one of the Textfields solves the issue.

`                            <TextField
                                required
                                **autoFocus**
                                variant="outlined"
                                id="username"
                                label="mobile number"
                                defaultValue=""
                                margin="normal"
                                name="username"
                                type="tel"
                                onChange={this.handleChange}
                                error={!this.state.validMobile}
                                autoComplete="tel-national username"
                            />

MarkMurphy · 2019-02-15T22:22:10Z

setting autoFocus on any one of the Textfields solves the issue.

Doesn't seem to work for me.

MarkMurphy · 2019-02-21T15:59:40Z

Also notice the yellow background for auto filled text, can it be overridden?

@garygrubb I did this via a theme override:

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        '&:-webkit-autofill': {
          transitionDelay: '9999s',
          transitionProperty: 'background-color, color',
        },
      },
    },
  },
});

Not ideal, but it's something.

The alternative is to use a box-shadow to fill the input: https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

MarkMurphy · 2019-02-21T16:15:23Z

@oliviertassinari This might do the trick: https://stackoverflow.com/a/41530164/396889

MarkMurphy · 2019-02-21T16:20:57Z

Also, FYI: facebook/react#1159

oliviertassinari · 2019-02-21T22:07:28Z

@MarkMurphy Any idea how I could reproduce the problem?

MarkMurphy · 2019-02-26T19:39:48Z

@MarkMurphy Any idea how I could reproduce the problem?

For me, I created a simple username and password form and allowed Chrome to remember my credentials.

Using Chrome 72.0.3626.119 on MacOS High Sierra 10.13.6

@material-ui/core version "3.8.1"
@material-ui/styles version "3.0.0-alpha.6"

oliviertassinari · 2019-02-27T12:23:34Z

@MarkMurphy I could reproduce it with https://material-ui.com/getting-started/page-layout-examples/sign-in/:

This is with the text field standard variant. So, we can notice two issues:

The focus active state isn't detected, we have a fix for it in TextField autoFocus prop does not shrink label #14132, just waiting for someone to lead the effort.
The fill state is only detected when moving the focus to the page.

Let's try with the outlined variant now. We can use this page: https://deploy-preview-14499--material-ui.netlify.com/getting-started/page-layout-examples/sign-in-side/

ymoon715 · 2019-02-27T20:28:00Z

It seems like its a chrome autofill problem. If we were provided with ways to detect chrome's autofill it'd be an easy fix... but Im not aware of any solution. Only solution was to turn off autocomplete/autofill for all textfields.

MarkMurphy · 2019-02-27T21:38:28Z

@ymoon715 there’s at least one other workable solution which I posted a link to above.

cezarderevlean · 2019-04-19T14:16:35Z

Workaround documentation:

Disabling autocomplete: https://stackoverflow.com/a/30976223/882337
Overriding styles: http://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs
Disabling autofill styles (snippet from the second link above):

input:-webkit-autofill,
.my-class:-webkit-autofill {
    -webkit-transition-delay: 9999999s;
}

garygrubb · 2019-04-22T05:49:48Z

Thanks @cezarderevlean , I got rid of the yellow background, Now just need to figure out how to remove the greyed out helper text.

cezarderevlean · 2019-04-22T07:08:58Z

If you don't want to "disable" autofill as described in the first link I've put above, keep in mind that after autofill, it will appear like in your screenshot only when page refreshed by a code change in
development (as far as I've tested). A normal browser load/refresh will be fine, it will make the placeholder shrink.

Also, if what I've said above proves untrue, one workaround you can implement is always keep the placeholder shrinked with this prop on TextField:

InputLabelProps={{
    shrink: true,
}}

garygrubb · 2019-04-24T06:15:25Z

@cezarderevlean thanks. You are right. A normal browser refresh works fine.

garygrubb · 2019-04-24T06:20:56Z

I don't know how I missed it but @MarkMurphy had a similar solution way back & it uses material theme override which is a bit cleaner for use case. Thanks Mark.

Rich43 · 2019-05-13T09:11:33Z

If you don't want to "disable" autofill as described in the first link I've put above, keep in mind that after autofill, it will appear like in your screenshot only when page refreshed by a code change in
development (as far as I've tested). A normal browser load/refresh will be fine, it will make the placeholder shrink.

Also, if what I've said above proves untrue, one workaround you can implement is always keep the placeholder shrinked with this prop on TextField:
InputLabelProps={{
    shrink: true,
}}

Thanks, this worked for me.

Rich43 · 2019-05-13T10:09:30Z

Setting autoFocus on the username field and autoComplete='new-password' on the password field also did the trick for me.

johndevedu · 2019-05-15T21:11:59Z

Update: I guess I jumped the gun here. My solution below seems to only work for plain react -- not MUI. Any ideas why?

For folks wanting to get the actual values of the input, instead of just detecting the presence of the values (see #14427 (comment)), I've come up with a solution detailed in this SO article: https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/56157489#56157489. The link has a good history of this overall issue that affects Chrome in general.

  componentDidMount() {
    var evt = new MouseEvent("click", {
      view: window,
      clientX: 0
    });
    window.dispatchEvent(evt);
    let iterations = 0;

    const interval = setInterval(() => {
      const value = this.inputs.email.value;
      // plain js alternative:
      // const value = document.getElementById("email").value;
      if (!!value || iterations > 20) {
        console.log(value);
        return clearInterval(interval);
      }

      iterations++;
      console.log("not found -> repeat");
    }, 100);
  }

Basically, I force a mouse click on the input so Chrome sets the value on the input. Then at a later point when the value is ready, I grab the value. It's definitely hacky, but Chrome leaves us with no options... (see details of Chrome's stance in the SO article).

eps1lon · 2019-06-14T10:01:45Z

TL;DR: This is a browser issue. They do not consistently fire input events when autofilling forms.

This is an issue at the browser level. If I click inside the page and then reload it correctly dispatches input events. If I click on the page, click in the navbar it only stops working on the second enter. If I land on the page by copying the link to the page and entering it in the navbar it also works.

I'm not even sure we can fix this for all browsers since when polled the input value is still empty even if autofilled. There's a neat trick for chrome only. Will investigate if only chrome has these issues.

croraf · 2019-08-24T09:27:39Z

@eps1lon Have you opened a bug in Chromium if this is Chromium related?

abrudin · 2021-09-05T12:38:51Z

Is it somehow possible to derive the color used for the dark mode autofill background from the theme? When using a blue primary color it doesn't work so well out of the box with the hardcoded color #266798:

HofmeisterAn · 2021-10-19T13:06:39Z

If I add WebkitBoxShadow, the edges of the input fields are somehow a little bit lighter. They do not match 100% the background color. Does anyone have an idea why? The transitionDelay looks fine.

carl-meyer-paxton · 2021-10-21T18:54:48Z

For v5:

    MuiInputBase: {
      styleOverrides: {
        input: {
          "&:-webkit-autofill": {
            transitionDelay: "9999s",
            transitionProperty: "background-color, color",
          },
        },
      },
    },

Thank you this helped solve the issue for me!

VarunS2002 · 2021-11-12T21:20:27Z

Thanks to @killmenot and @pyzenberg
Solution for v4:

createTheme({
  overrides: {
    MuiInputBase: {
      input: {
        '&:-webkit-autofill': {
          transitionDelay: '9999s',
          transitionProperty: 'background-color, color',
        },
      },
    },
    MuiFilledInput: {
        styleOverrides: {
          input: {
            '&:-webkit-autofill': {
              WebkitBoxShadow: 'inherit',
              WebkitTextFillColor: 'inherit',
              caretColor: 'inherit',
            },
          }
        },
      },
    MuiOutlinedInput: {
      input: {
        '&:-webkit-autofill': {
          WebkitBoxShadow: 'inherit',
          WebkitTextFillColor: 'inherit',
          caretColor: 'inherit',
        },
      },
    },
  },
});

sandro768 · 2021-12-30T15:27:03Z

I still see it in v5 why is this issue closed?

Ziv-Barber · 2022-09-29T11:58:31Z

Not the best solution but it's the only one that working right now:

  components: {
    MuiCssBaseline: {
      styleOverrides: `
        input:-webkit-autofill,
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus, 
        input:-webkit-autofill:active  {
          -webkit-box-shadow: 0 0 0 100px #111111 inset !important;
        }
      `
    }
  }

Change #111111 to your background color. I don't like this solution but it's the only one that working right now (V5).

koooge · 2022-11-18T09:35:33Z

HI there,
I got same issue @mui/[email protected] with react@18 and chrome 107. It did not happen with react@17.

LoveriusB · 2022-11-19T12:35:42Z

Not the best solution but it's the only one that working right now:
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        input:-webkit-autofill,
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus, 
        input:-webkit-autofill:active  {
          -webkit-box-shadow: 0 0 0 100px #111111 inset !important;
        }
      `
    }
  }
Change #111111 to your background color. I don't like this solution but it's the only one that working right now (V5).

My hero.

mstking147 · 2022-12-18T13:13:29Z

I still see it in v5 why is this issue closed?

I'm to!

jlanssie · 2023-01-05T13:31:14Z

Opened a bug at Chromium because it is related to Chromium or its Blink Engine.

https://bugs.chromium.org/p/chromium/issues/detail?id=1405170

alexeikaratai · 2023-01-16T11:14:57Z

Any updates?

Khazady · 2023-02-17T13:23:04Z

This issue is still relevant.

jlanssie · 2023-02-17T14:05:45Z

Try using the -internal-autofill-previewed selector on css, e.g. input:-internal-autofill-previewed.

sanzhardanybayev · 2023-04-12T08:50:09Z

I have a simple solution for that, return null for a value.

Here's the example:

          <TextField
              label={errors.email || "Email"}
              name={'adminEmail'}
              error={!!errors.email}
              onChange={handleChange}
              value={values.email || null}
              variant="outlined"
              className={`mb-8 `}
              autoComplete="new-password"
          />

CodingStunts · 2023-04-12T16:57:51Z

I have a simple solution for that, return null for a value.

Here's the example:

          <TextField
              label={errors.email || "Email"}
              name={'adminEmail'}
              error={!!errors.email}
              onChange={handleChange}
              value={values.email || null}
              variant="outlined"
              className={`mb-8 `}
              autoComplete="new-password"
          />

Great timing! Had to fix a bug regarding this today and setting initial values to null is the only thing that worked, so thank you!
We had it inconsistently overlapping on some version of the form but not others. Bizarre.

jlanssie · 2023-04-12T22:30:29Z

Do not use React or JS to solve this. This issue can be easily solved by using CSS selectors. Try using the -internal-autofill-previewed selector on css, e.g. input:-internal-autofill-previewed to e.g; hide your placeholder text. Read more at https://bugs.chromium.org/p/chromium/issues/detail?id=1405170

judy-n · 2023-04-26T20:30:35Z

I have a simple solution for that, return null for a value.

Here's the example:

          <TextField
              label={errors.email || "Email"}
              name={'adminEmail'}
              error={!!errors.email}
              onChange={handleChange}
              value={values.email || null}
              variant="outlined"
              className={`mb-8 `}
              autoComplete="new-password"
          />

Thanks a lot! This worked for me 👍

michele6000 · 2023-08-02T08:54:15Z

The problem is present in last verison, any fix?

chakkyy · 2023-08-23T19:49:47Z

I found another workaround if you want to keep the autofill styles but hide the placeholder until the user focuses the input. It's not very clean but it works at least:
(You will need to play with top, left, width, height and padding props so the autofill adjusts well to your input.)

styleOverrides: {
    input: {
      position: 'relative',
      '&:-webkit-autofill': {
        position: 'absolute',
        left: '5px',
        top: '5px',
        zIndex: 9999,
        width: '87%',
        height: '35%',
        paddingLeft: '10px',
      },
    },
    ```

jlanssie · 2023-08-23T21:10:40Z

Avoid JS or React.js solutions, simply use these CSS selectors internal-autofill-previewed selector, as described at https://bugs.chromium.org/p/chromium/issues/detail?id=1405170

misharosa · 2023-09-03T03:26:49Z

What if we make it in another way making controlled labels by InputLabelProps(shrink):
InputLabelProps={{ shrink: isAutoFill || undefined }} in case auto-fill animation is happening

    const [isAutoFill, setIsAutoFill] = useState(false);

    <TextField
          variant="outlined"
          name="email"
          label="Email"
          fullWidth={true}
          InputLabelProps={{ shrink: isAutoFill || undefined }}
          InputProps={{
                onAnimationStart: (e: React.AnimationEvent<HTMLDivElement>) => {
                    e.animationName === 'mui-auto-fill' && setIsAutoFill(true);
                },
                onAnimationEnd: (e: React.AnimationEvent<HTMLDivElement>) =>
                    e.animationName === 'mui-auto-fill-cancel' && setIsAutoFill(false),
                onFocus: () => setIsAutoFill(false),
              }}
      />

@oliviertassinari Wdyt?

Shemrock3267 · 2024-04-17T11:15:27Z

This can be partially fixed if you are using react-hook-form and provide defaultValues as undefined.
The only downside, is that shadowDOM font-size will probably be different to font-size of your input field.
Other than that it worked for me. It's better that shrink: true.

Example:

const form = useForm<AuthUserDto>({
    resolver: yupResolver(schema),
    defaultValues: {
      email: undefined,
      password: undefined,
    },
    reValidateMode: 'onChange',
    mode: 'onChange',
  });

Jokasxy · 2024-06-04T13:36:14Z

This is how I fixed the overlap of autofill and label. I added this to theme.

NOTE: I used a specific selectors for outlined textfields, for the other variants, selectors may vary.

This puts all of your textfield labels which are autofilled into notched position initially.

If you wish to remove the background color also, there are working solutions above.

MuiTextField: {
	styleOverrides: {
		root: {
			// Puts the label into notched position
			'.MuiInputLabel-outlined:has(+ .MuiOutlinedInput-root > .MuiOutlinedInput-input:-webkit-autofill)': {
				transform: 'translate(14px, -9px) scale(0.75)',
			},
			// Creates a hole around the text inside the border
			'.MuiOutlinedInput-input:-webkit-autofill + .MuiOutlinedInput-notchedOutline > legend': {
				maxWidth: '100%',
			},
		},
	},
},
```

euroboy · 2024-11-04T15:04:10Z

Any updates on this issue?

oliviertassinari mentioned this issue Feb 8, 2019

on Animation Start event is not triggering #14453

Closed

oliviertassinari added component: text field This is the name of the generic UI component, not the React module! priority: important This change can make a difference labels Feb 8, 2019

oliviertassinari changed the title ~~TextField - display issue in outlined variant~~ [TextField] Handle Chrome autofill Feb 10, 2019

oliviertassinari mentioned this issue Feb 27, 2019

[TextField] Form autofill doesn't update floating label text on textfield #718

Closed

oliviertassinari added the bug 🐛 Something doesn't work label May 15, 2019

eps1lon mentioned this issue Jun 5, 2019

[TextField - v4] Label does not shrink when chrome autofill #16053

Closed

eps1lon mentioned this issue Jun 14, 2019

[InputLabel] Fix shrunk label click not focusing input #16215

Closed

1 task

NavyAdmiral mentioned this issue Jun 14, 2019

Sign In Form Input & Auto Fill smartcontractkit/chainlink#960

Closed

legendsjohn mentioned this issue Aug 19, 2022

Filled form items appear yellow instead of conventional color in sign in legendsolar/frontend#161

Closed

NewOldMax mentioned this issue Nov 17, 2022

Chrome autofill overlapping TextValidator component floating label. NewOldMax/react-material-ui-form-validator#178

Closed

morgan5505 mentioned this issue May 16, 2023

Chrome autofill does not shrink input labels dohomi/react-hook-form-mui#141

Closed

2 tasks

oliviertassinari mentioned this issue Sep 21, 2024

[material-ui][InputBase] Auto-fill keyframes may cause unwanted animations #39539

Open

This was referenced Dec 10, 2024

[TextField] Default Webkit autofill color does not use variables or palette #44665

Open

[material-ui][TextField] Fix filled state to be synced with autofill #44135

Draft

[TextField] Handle Chrome autofill #14427

[TextField] Handle Chrome autofill #14427

Comments

garygrubb commented Feb 6, 2019 • edited Loading

oliviertassinari commented Feb 8, 2019 • edited Loading

garygrubb commented Feb 14, 2019 • edited by oliviertassinari Loading

MarkMurphy commented Feb 15, 2019

MarkMurphy commented Feb 21, 2019 • edited Loading

MarkMurphy commented Feb 21, 2019

MarkMurphy commented Feb 21, 2019

oliviertassinari commented Feb 21, 2019

MarkMurphy commented Feb 26, 2019 • edited Loading

oliviertassinari commented Feb 27, 2019 • edited Loading

ymoon715 commented Feb 27, 2019

MarkMurphy commented Feb 27, 2019

cezarderevlean commented Apr 19, 2019

garygrubb commented Apr 22, 2019

cezarderevlean commented Apr 22, 2019

garygrubb commented Apr 24, 2019

garygrubb commented Apr 24, 2019

Rich43 commented May 13, 2019

Rich43 commented May 13, 2019

johndevedu commented May 15, 2019 • edited Loading

eps1lon commented Jun 14, 2019

croraf commented Aug 24, 2019

abrudin commented Sep 5, 2021

HofmeisterAn commented Oct 19, 2021

carl-meyer-paxton commented Oct 21, 2021

VarunS2002 commented Nov 12, 2021

sandro768 commented Dec 30, 2021

Ziv-Barber commented Sep 29, 2022

koooge commented Nov 18, 2022

LoveriusB commented Nov 19, 2022

mstking147 commented Dec 18, 2022

jlanssie commented Jan 5, 2023

alexeikaratai commented Jan 16, 2023

Khazady commented Feb 17, 2023

jlanssie commented Feb 17, 2023

sanzhardanybayev commented Apr 12, 2023

CodingStunts commented Apr 12, 2023

jlanssie commented Apr 12, 2023 • edited Loading

judy-n commented Apr 26, 2023

michele6000 commented Aug 2, 2023

chakkyy commented Aug 23, 2023

jlanssie commented Aug 23, 2023 • edited Loading

misharosa commented Sep 3, 2023 • edited Loading

Shemrock3267 commented Apr 17, 2024

Jokasxy commented Jun 4, 2024 • edited Loading

euroboy commented Nov 4, 2024

garygrubb commented Feb 6, 2019 •

edited

Loading

oliviertassinari commented Feb 8, 2019 •

edited

Loading

garygrubb commented Feb 14, 2019 •

edited by oliviertassinari

Loading

MarkMurphy commented Feb 21, 2019 •

edited

Loading

MarkMurphy commented Feb 26, 2019 •

edited

Loading

oliviertassinari commented Feb 27, 2019 •

edited

Loading

johndevedu commented May 15, 2019 •

edited

Loading

jlanssie commented Apr 12, 2023 •

edited

Loading

jlanssie commented Aug 23, 2023 •

edited

Loading

misharosa commented Sep 3, 2023 •

edited

Loading

Jokasxy commented Jun 4, 2024 •

edited

Loading