4

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.

enter image description here

Any ideas why? Thanks

user2002692
  • 971
  • 2
  • 17
  • 34

2 Answers2

2

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}
/>
Rafael Ferreira
  • 21
  • 3
0

According to the documentation, inputProps is not a valid property of react-select. And, according to the code (look at the renderInput() method), autocomplete is always set to 'off', and isn't something controllable by properties. What is it you're trying to accomplish?

Steve -Cutter- Blades
  • 5,057
  • 2
  • 26
  • 40
  • I am using AsyncSelect to do something like sending a request to load options when someone types, so the problem is the input will prompt a dropdown for autocomplete which is on top of the loaded options dropdown, which blocks a part of the dropdown options, so I want to disable autocomplete. – user2002692 Oct 17 '18 at 23:02
  • The AsyncSelect wraps Select, so everything mentioned in my answer still applies (it uses the exact same renderInput() method). I do not understand what you mean by 'prompt a dropdown for autocomplete... on top of the loaded options'. Can you add a screenshot to your original post? – Steve -Cutter- Blades Oct 18 '18 at 11:40
  • I just added a screenshot which is the problem. – user2002692 Oct 18 '18 at 17:53
  • That is an odd one. Never seen anything like that before. Almost looks like it's some chrome specific behavior, or attached to some kind of chrome extension, but I can't recreate it locally (I'm on Chrome latest on a Mac). – Steve -Cutter- Blades Oct 18 '18 at 19:18