React-select: Disable Browser Autocomplete

[rcbyrne]

When using react-select in Microsoft Edge I have a problem where the browser autocomplete is appearing on top of the dropdown making it hard to use.

Currently as a workaround I am using jQuery to add ("autocomplete", "off") to the DOM element. I found that while the element is focused the browser wont reflect the changes. So instead of using autoFocus= true I am now calling a focus function in the componendDidMount function.

componentDidMount(){
     $(".myClass .Select-input input").attr("autocomplete", "off");
     this.focus();
}

[agirton]

Hi @rcbyrne you can use the inputProps to set any html attributes. Would this solve your issue?

[rcbyrne]

Thank you @agirton this works perfectly

[minicstudio]

Seems that browsers ignoring autocomplete="off" ( at least Chrome for sure ), but its really annoying can be if the autocomplete appears. Would be really nice to find a solution to disable autocomplete.

Or anybody has any good advice? So far all my solutions / hacks failed ...

[andrewmclagan]

autoComplete="new-password" (yes it works)

[individual11]

this worked for me
inputProps={{autoComplete: 'random-string', autoFill:'off' }}

[minicstudio]

seems the following is enough at least in Chrome
inputProps={{autoComplete: 'random-string'}}
or
inputProps={{autoComplete: 0}}

For autoFill React drops a Warning, should be lowercase autofill.

[LACoderDeBH]

Love react-select, such an elegant solution. But I've tried various random strings and it seems to work but then doesn't work for others. Are there any updated solutions besides:
inputProps={{autoComplete: 'random-string', autoFill:'off' }}

Thank you!

[MinhNguyen41092]

Seems like inputProps was removed in the new version. Does anyone have any idea how to solve this issue now?

[eclewlow]

<Form.Dropdown
  search
  selection
  allowAdditions
  options={...}
  name="..."
  searchInput={{ autoComplete: 'new-password' }}   // <--- This does it.
/>

[saresh-krish]

can we use autocomplete: "off" in phone number react-phone-input plugin (https://www.npmjs.com/package/react-phone-input-2)

<Form name="normal_login" className="vendor_invite_form form_noStyle" onFinish={this.onFinish} onFinishFailed={this.onFinishFailed} layout="vertical" ref={this.formRef} scrollToFirstError={true} autoComplete="new-password" > <Form.Item name="primary_contact_phone" label="Phone" rules={[ { required: false, message: 'Please enter valid phone number', }, ]} > <PhoneInput enableSearch={true} country={'us'} onChange={this.handleOnChangePrimaryPhone} placeholder={""} isValid={true} autoComplete="new-password" /> </Form.Item> </Form>
how to set the autocomplete off in this ANTD form