3

I have a ReactJS app that is built with Material UI.

The target browsers are Chrome and Microsoft Edge, both latest version and two latest versions (so in total 3 versions).

What I want to achieve:

Disable the autocomplete and autofill for textinput fields.

I have searched for a long time but could not find a working solution.

What I have tried so far:

  1. autoComplete={"off"}
  2. autoComplete={"false"}
  3. autoComplete={"xyz"} so Autocomplete with a custom value
  4. autoComplete="new-password"> but it does not work in Edge
  5. Implementation of a solution, that adds HTML readonly attribute to each input field at the beginning, removes it on focus and adds it again onBlur of the texfield. This does not work and moreover leads to a defect that moving to another text input by using tabulator on the keyboard is not possible any more.

It is no solution for me, to wrap every field in a <form> element.

Happy to see an approach to solve this.

Gutelaunetyp
  • 2,144
  • 4
  • 15
  • 40

3 Answers3

1

One possible solution is to set a unique name attribute for every time <TextField> is rendered. For example:

<TextField
  {...textFieldProps}
  label={label}
  name={`${label}${Date()}`}
/>

The auto-fill and auto-complete behavior you are referencing is modern browsers trying to be "smart" and remember a user's past inputs to save them time. You might have noticed this behavior while browsing the web where one text input "remembers" your input from a different site. When this occurs, it is because both elements have the same value for the name attribute. In your case, this "memory" behavior is not desired.

While this solution works, a new Date object is created on every render which is not ideal; however, Date is used because it assures a unique name down to the second. There are probably packages that create unique names in a more performant manner.

Charles Kornoelje
  • 758
  • 8
  • 13
  • This is the only solution that has worked in all cases for me. I can understand why the browser wants to make it easier for the users to fill forms, but there are realistic cases where we need to flat-out disable this behavior. What I did find odd was that using a GUID did not fix it. The only thing that made it work was to use a date ISO timestamp (in my case), plus some prefix (e.g. `name="off2023-09-02T18:47:25.235Z"`. – Dylan Vester Sep 02 '23 at 18:46
0

You can read more in detail about autocomplete here. The problem is that autoComplete is Material Ui prop and autocomplete is native html attribute.

The possible solution is to make custom component not using Material Ui where you have more control. That way, I am certain, you will manage to disable cross-browser autocomplete.

Milan Milicevic
  • 124
  • 5
-1

Microsoft Edge ignores the autoComplete prop. There are work arounds but they are hacky.

So Microsoft Edge does a regex on label > name to tie an input to autocomplete. Because of this you can't use "standard" labels to do this.

Without knowing all the patterns that it's matching, I would say that the simplest solution is to just clear it after it autofills. If you do know the patterns you can avoid it and create a custom TextField to avoid the cases that makes Edge autoComplete.

As for the last bullet, that is a more complicated solution but doable with logic. You will have to create a wrapper component around your text input fields (TextField). That checks when the component is focused and then removes the readOnly prop.

neon
  • 1
  • 2
  • Hi @neon, thanks for your answer. The problem is not only the autofill, also the autocomplete. I do not want to have a popup dropdown that suggests values for the field. Therefor clearing the Textfield is not a solution. Regarding Solution 5 (adding and removing readonly attribute): I have implemented it and it is not so difficult. But it does neither work. Moreover it destroys the tabulator function between input fields. – Gutelaunetyp Nov 13 '20 at 08:15