react material Ui textfield type password disable autofill from browser when focused on it

Viewed 1201

I am using react material UI 4 and I want to disable the browser autofill/auto complete suggestion when I focus on my password field which is coming from TextField.

My requirement is to not show suggestions when we focus on that field and the field type is password. For username and email it is working but for some reason it is not working for password field.

enter image description here

I have tried below appraoch but nothing is working

<TextField
   inputProps={{
      autoComplete: 'off'
   }}
/>

===============================
<TextField
  inputProps={{
     ...params.inputProps,
     autoComplete: 'new-password',
   }}
 />

=====================
<TextField
 autoComplete="new-password"
/>

=========================
//Below works but then this field no more acts as a password field

<TextField
   label="Password"
   className={classes.textField}
   name="password"
   inputProps={{
      type:"password",
      autoComplete: 'new-password'
   }} />

Any help will be appreciated. Thanks

1 Answers

try using the method I'm adding below. It worked for me.

<Textfield
  inputProps={{
    autocomplete: 'new-password',
    form: {
      autocomplete: 'off',
    },
  }}
  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Updated Answer: <TextField autoComplete="chrome-off" />

Let me know if you still face any issue.

Related