I am using react material UI 4 and I want to disable the browser autofill/auto plete suggestion when I focus on my password field which is ing 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.

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

I am using react material UI 4 and I want to disable the browser autofill/auto plete suggestion when I focus on my password field which is ing 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.

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

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Apr 12, 2022 at 10:11 tyler asked Apr 11, 2022 at 17:38 tylertyler 48855 silver badges2020 bronze badges 4

• have you tried <form autoplete="off">? – Jatin Parmar Commented Apr 11, 2022 at 17:42
• I dont have form tag over my ponent – tyler Commented Apr 11, 2022 at 17:49
• then will suggest to give it a chance – Jatin Parmar Commented Apr 11, 2022 at 17:49
• Not working brother – tyler Commented Apr 11, 2022 at 17:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

<Textfield
  inputProps={{
    autoplete: 'new-password',
    form: {
      autoplete: 'off',
    },
  }}
  />

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./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.

const [readOnly, setReadOnly] = useState(true)

// render

<TextField
 label="Password"
 className={classes.textField}
 name="password"
 readOnly={readOnly}
 onFocus={e => setReadOnly(false)}
  sx={{
        '& input': {
                     textSecurity: 'disc',
                     '-moz-text-security': 'disc',
                     '-webkit-text-security': 'disc',
                    },
      }}
  />

This is my first time answering a question, so I apologize if my explanation is not the clearest. In my specific case, I have an autoplete select where I use a textfield inside it. I encountered a similar issue, but in my case, it didn't make sense to have browser suggestions in a select element where you only need to select elements and, of course, write. After hours of searching i found this, it worked for me

renderInput={params => <TextField {...params} name='new-password' />}

i hope it works for anyone that is using this