react-select inputProps does not get applied on AsyncSelect

Question

I am using the following code to disable autocomplete on AsyncSelect input, but inputProps does not seem to get applied.

<AsyncSelect
  placeholder="Search a city"
  styles={customStyles}
  onChange={this._onChangeCity}
  loadOptions={this._loadMatchedCities}
  inputProps={{ autoComplete: 'nope', autoFill:'off' }}
  defaultOptions={true}
  noOptionsMessage={this._noOptionsMessage}
  loadingMessage={({inputValue}) => 'Loading cities...'}
/>

when I inspect the input element on Chrome, it shows:

<input type="text" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" value="" aria-autocomplete="list" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;" data-reactid="59">

If I manually change to autocomplete="nope" on the inspected element, autocomplete will be turned off, so clearly, inputProps={{ autoComplete: 'nope', autoFill:'off' }} does not get applied.

Also the existing autocomplete="off" does not turn off autocomplete, I am using Chrome Version 69.0.3497.100 (Official Build) (64-bit)

This is the problem I am trying to solve.

Any ideas why? Thanks

Answer 1

I found one possible solution. At least i had the same problem with chrome and it worked well.

Since the autocomplete is only dispatched when the field is focused or the user start typing on it, we can handle the focus event.

So i'm using this code:

<ReactSelect
    onFocus={e => {
        if (e.target.autocomplete) {
            e.target.autocomplete = "nope";
        }
    }}
    {...otherProps}
/>