autcomplete="off" doesn't work all the times and we have to use other than "off" to fix autocomplete for some address saved in browser.

[vamsikankipati]

https://github.com/JedWatson/react-select/blob/b0411ff46bc1ecf45d9bca4fb58fbce1e57f847c/packages/react-select/src/Select.js#L1402

In chrome browser, when addresses are saved in autofill option settings, then the state is automatically being showed in dropdown suggestions apart from dropdown options available.

can we not make this autocomplete dynamic with default value as "off" ? eg: autocomplete={autocomplete} So that, user will pass different autocomplete value in case required and if not, the default value "off" will be used.

[ebonow]

Greetings @vamsikankipati ,

You can attempt to override it, but Google continues to change their stance on how/what/when to show an autoFill menu on chrome. They have taken the stance that they know better when to show it and will do so regardless of what value is passed into the autocomplete and instead use regex matching on the input's name attribute.

You can read the long StackOverflow history here: https://stackoverflow.com/questions/15738259/disabling-chrome-autofill

I have personally expressed my opinion on this to Google here: https://bugs.chromium.org/p/chromium/issues/detail?id=587466#c591

To answer your exact question though, yes you can override the props passed to the Input by supplying your own value as any additional props sent to the input component are applied as props to the input DOM element.

const Input = props => {
  const { autoComplete } = props.selectProps;
  return <components.Input {...props} autocomplete={autocomplete} />
}

Since we had a pre-existing issue describing this autocomplete behavior, I have re-opened it https://github.com/JedWatson/react-select/issues/3500

I will close this now but if you have additional questions, please feel free to ask and we can reopen or address your concerns.

[vamsikankipati]

It totally makes sense. thanks for the update.

[fresonn]

chrome-off - https://stackoverflow.com/a/30976223/15604836

import { components, InputProps } from 'react-select'

// InputProps<[your option type], [multi select?: true | false]>
const SelectInput = (props: InputProps<option, false>) => {
  return <components.Input {...props} autoComplete="chrome-off" />
}