Question 216201 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Material UI Input field autocomplete=off not working

I am using Input field from material-ui along with react, trying to set autofill off for all the fields and have tried multiple solutions available but none of them seems working properly. Tried Solutions –

  • By setting autoComplete="off"
  • Passed autocomplete:’off’ in the InputProps
  • By setting random name for the field – this is working but doesn’t allow to enter anything into input field
  • By setting unique ID/ClassName/Name attribute
  • via JS script

But none of them seems working fine.
Can anyone help me with the working solution?

Tags:

2

Answers


  1. 0

    Pass autoComplete="off" to the InputProps, not directly to Autocomplete

    <Autocomplete
  ...
  InputProps={{
    autocomplete: "off"
  }}
/>
    Login or Signup to reply.
  2. 0

    you can try below approaches for this issue.

    Set the autoComplete attribute to off. This is the simplest way to disable autofill, and it should work in most browsers.

    <TextField
  autoComplete="off"
  label="Username"
  name="username"
  />

    Pass the autocomplete prop to the InputProps object. This is another way to disable autofill, and it is more flexible than setting the autoComplete attribute directly.

     <TextField
      InputProps={{
        autocomplete: "off",
      }}
      label="Username"
      name="username"
      />

    Also you can try below JS code to use a JS script to disable autofill. This is the most secure way to disable autofill, but it is also the most complex.

    const disableAutocomplete = () => {
  document.querySelectorAll("input").forEach((input) => {
    input.setAttribute("autocomplete", "off");
  });
};

disableAutocomplete();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search