material-ui TextField disable Browser autoComplete

material-ui textfield disable autofill
material-ui textfield width
material-ui textfield focus
material-ui textfield color
material-ui textfield max length
material-ui autocomplete onchange
material-ui textfield onchange
material-ui autocomplete clear input

I use material ui v0.20.0 and I have to prohibit saving the password for a user with TextField. I added props to TextField autocomplete='nope' cause not all the browsers understand autocomplete='off'. It seems that the last version of Chrome 63 does not accept it. Sometimes it does not work and sometimes it does. I can not get why it works so hectic. When chrome asks to save password and I save it, and after that I want to edit input I still have this :

  <TextField
         name='userName'
         floatingLabelText={<FormattedMessage id='users.username' />}
         value={name || ''}
         onChange={(e, name) => this.changeUser({name})}
         // autoComplete='new-password'

    /> 

    <TextField
        name='password'
        floatingLabelText={<FormattedMessage id='users.passwords.new' />}
        type='password'
        value={password || ''}
        onChange={(e, password) => this.changeUser({password})}
        autoComplete='new-password'
   />

Looks like it works in Firefox(v57.0.4)

By default TextField does not have autoComplete='off'

To Disable auto Complete in material-ui TextField. its works for me

<TextField
  name='password'
  autoComplete='off'
  type='text'
  ... 
/>

should be autoComplete='off'

autoComplete='off'

Disabling autofill on inline text · Issue #2653 · mui-org/material-ui , Autocomplete by chrome can make it look kind of bad sometimes with to TextField, react renders it to input, but they still propose to autofill  Autocomplete. The autocomplete is a normal text input enhanced by a panel of suggested options. Material-UI doesn't provide any high-level API for solving this problem. We encourage people relying on the solutions the React community has built.

This seems to have worked for me (we are using material ui with redux form)

 <Textfield
    inputProps={
    {
      autocomplete: "new-password",
      form: {
        autocomplete: "off",
      }
    }
  />

"new-password" works if the input is type="password "off" works if its a regular text field wrapped in a form

[TextField] Handle Chrome autofill · Issue #14427 · mui-org/material-ui, Disabling autofill styles (snippet from the second link above):. input:-webkit-​autofill, .my-class:-webkit-autofill { -webkit-transition-delay: 9999999s; }  How to set autocomplete = "off" attribute to a textfield in a forms? WebForms Navigate to Forms > open the form > on the specified textbox > Edit > Advanced > DisableBrowserAutocomplete and set the field to true.

With Material UI input you can use

autoComplete="new-password"

So you will have something like this input :

<TextField
 autoComplete="new-password"
/>

This was a big help for example to avoid more styles from the browser on a login page.

Hope this helps to others!

Autocomplete API, The API documentation of the Autocomplete React component. known as the completion string, appears inline after the input cursor in the textbox. disableCloseOnSelect, bool, false, If true , the popup won't close when a value is selected. on (specifies that autocomplete is enabled, this is the default value) off (specifies that autocomplete is disabled) This can be done in a <form> for a complete form or for specific <input> elements: Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form.

Fixed. Just need to add above real input field

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - medium tested on EDGE, Chrome(latest v63), Firefox Quantum (57.0.4 64-бит), Firefox(52.2.0) fake fields are a workaround for chrome/opera autofill getting the wrong fields

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

  <TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

documentation of the TextField - TextField API, If you wish to alter the props applied to the input element, you can do so as follows autoComplete, string, This prop helps users to fill forms faster, especially on  @anyong I am more of an angular expert than react. may be DropDownMenu can be extended to use as autocomplete. For the angular component, most of the logic is here. I am just starting with material-ui and will ping once I get an understanding. Let me know if you have any start on this so I can have a look.

This worked for me:

Whenever you want to disable a autofill for the password field (also the above field), just put this in your password input:

<input type="password" name='any-filed-name-here-password' autoComplete='new-password' />

The important thing is to have the autoComplete='new-password'

Autocomplete React component, The autocomplete is a normal text input enhanced by a panel of suggested options. The widget is useful for setting the value of a single-line textbox in one of two By default, the component disable the autocomplete feature (​remembering  oliviertassinari changed the title TextField - display issue in outlined variant [TextField] Handle Chrome autofill Feb 10, 2019

Input API, The API documentation of the Input React component. autoComplete, string, This prop helps users to fill forms faster, especially on mobile devices. disableUnderline, bool, If true , the input will not have an underline. Tab Scroll Button · Textarea Autosize · Text Field · Toggle Button · Toggle Button Group · Toolbar  If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. blurOnSelect 'mouse'

Turning Off Autocomplete in Chrome with React, tl;dr Add a hidden input with an arbitrary value attribute at the top of the form, on the input fields for which you wish to disable autocomplete. To enable to disable autocomplete in the Microsoft Edge browser, follow the steps below. Open Microsoft Edge. Click More in the upper-right corner of the window. Select Settings from the drop-down menu that appears. Scroll to the bottom and select the button. Move the switch next to Save form entries to .

text-field - material-ui · Bit, on mobile devices. Tags: Device, Form Elements, Mobile, React, Text Field. Dependencies: @material-ui/utils, clsx, prop-types, react. Built with React. Use text-field by mui-org in your code. import InputLabel from '@bit/mui-org.material​-ui.input-label' The name can be confusing, as it's more like an autofill. You can​  The HTML autocomplete attribute is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements. autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

Comments
  • Yes thanks! With Material UI I just tested it, even with <TextField type="password" />, adding autoComplete="new-password" will also disable autocomplete on Email TextField.
  • it is related to AutoComplete component not for TexField When I pass autocomplete to texfield the react render it to input, but it does not work.
  • It applies to Texfield as well. You don’t need to pass autoComplete="off" it is default now. <TextField autoComplete='off' floatingLabelText="From" ... />
  • I added the screenshot for that, looks like TexField has not autocompleted by default. But the problem with type='password', when I create a new user and save his password, and after that create the new one, the browser propose has already saved the previous password in the browser. I need to avoid it as admin