antd Select turn off autocomplete

Question

I am trying to turn off autocomplete on an ant design Select but nothing I try works. This is obviously problematic as chromes (only one tested at this point) autocomplete completely covers the Select Options (Image below).

I am using antd in React and have tried the following on both the Select tag and Form tag:

autoComplete="off" autoComplete="nope" autoComplete="business-state"

and none of them seem to turn it off.

Here is a link to a code sandbox with almost the same code but the problem is it does not reproduce the same issue. For some reason the exact same code on sandbox doesn't show the autocomplete. I added an email input to show to test if autocomplete works on that and sure enough it does. I am at a loss for why this is working differently in sandbox than from my server.

https://codesandbox.io/s/wovnzpl9xw

Here is what it looks like when a user is typing to search the Options

Here is what it should look like (it only looks like this on focus but as soon as a user types chrome shows autocomplete)

Answer 1

Figured out a solution to my question, thanks to @trkaplan for pointing me in the right direction. Not the most elegant solution I am guessing so if anyone else has a better way to implement this I am all ears. I essentially had to create an onFocus method for the Select that grabs all of the elements with class ant-select-search__field loops through them and utilize setAttribute to change the autocomplete attribute to an arbitrary value in order to disable it.

onFocus={() => {
  if (!this.state.autocompleteDisabled) {
    let i;
    const el = document.getElementsByClassName(
      "ant-select-search__field"
    );
    for (i = 0; i < el.length; i++) {
      el[i].setAttribute(
        "autocomplete",
        "registration-select"
      );
    }
    this.setState({ autocompleteDisabled: true });
  }
}}

Answer 2

I have applied to add the autocomplete="none" into the Select and it is looking fine.

<Select
    showSearch
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearchZipCode}
    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
    placeholder="Choose a City"
    autoComplete="none"
    // disabled={true}
>
    {cities.map((city) => (
        <Select.Option key={city.id} value={city.id}>
            {city.name}
        </Select.Option>
    ))}
</Select>;