4

I'm working with an antd AutoComplete component (see docs here), and it's supposed to be part of a CRM where the user types in the phone number of a prospective client and the <AutoComplete /> component suggests phone numbers from list of customer contacts existing in database.

Obviously, the user's personal contact data saved by the browser is useless for such an input.

So, the issue is I keep getting interference from Chrome's autofill dropdown like shown in the picture below

autofill dropdownYou can see the unwanted dropdown hiding the dropdown created by antd AutoComplete

And the thing is that inasmuch as I set the autocomplete attribute on the AutoComplete component, when I inspect in Devtools, I see that the attribute does not get passed down into the wrapped input element being used by antd. Please how do I fix this?

PS: This is for antd v3

JayCodist
  • 2,424
  • 2
  • 12
  • 28

1 Answers1

0

This was fixed in antd version 4.6.3.
For earlier versions you need to use this answer and set the autocomplete property to a random string:

<AutoComplete
  options={options}
  style={{
    width: 200
  }}
  placeholder="input here"
  autoComplete={"nope"}
/>

UPDATE
For version 3.x you can customize input component

<AutoComplete
  dataSource={options}
  style={{
    width: 200
  }}
  placeholder="input here"
>
  <Input autoComplete={"nope"} />
</AutoComplete>
Andrey
  • 928
  • 1
  • 12
  • 20
  • I'm using antd v3 and the link you posted doesn't fix the issue for earlier versions of antd `AutoComplete` – JayCodist Nov 21 '21 at 18:34