#StackBounty: #reactjs #autocomplete #material-ui #autofill Chrome, Edge – Disable autofill / autocomplete for fields

Bounty: 200

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.