react-select inputProps 未应用于 AsyncSelect答案

【问题标题】：react-select inputProps does not get applied on AsyncSelectreact-select inputProps 未应用于 AsyncSelect
【发布时间】：2018-10-15 18:05:59
【问题描述】：

我正在使用以下代码在AsyncSelect 输入上禁用autocomplete，但inputProps 似乎没有被应用。

<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...'}
/>

当我在 Chrome 上检查输入元素时，它显示：

<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">

如果我在检查的元素上手动更改为autocomplete="nope"，自动完成功能将被关闭，因此很明显，inputProps={{ autoComplete: 'nope', autoFill:'off' }} 不会被应用。

还有现有的autocomplete="off"不关闭autocomplete，我用的是Chrome Version 69.0.3497.100 (Official Build) (64-bit)

这是我要解决的问题。

任何想法为什么？谢谢

【问题讨论】：

标签： html input autocomplete react-select input-field

【解决方案1】：

我找到了一种可能的解决方案。至少我在使用 chrome 时遇到了同样的问题，而且效果很好。

由于仅在字段获得焦点或用户开始在其上输入时才调度自动完成，因此我们可以处理焦点事件。

所以我正在使用这个代码：

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

【讨论】：

我不喜欢没有更清晰的解决方案，但它对我有用。

【解决方案2】：

根据documentation，inputProps 不是 react-select 的有效属性。而且，根据code（查看renderInput() 方法），autocomplete 始终设置为“关闭”，并且不是由属性控制的。你想完成什么？

【讨论】：

我正在使用 AsyncSelect 来做一些事情，比如当有人输入时发送一个加载选项的请求，所以问题是输入会提示一个自动完成下拉列表，它位于加载的选项下拉列表的顶部，它会阻塞下拉选项的一部分，所以我想禁用自动完成。
AsyncSelect 包装了 Select，因此我的答案中提到的所有内容仍然适用（它使用完全相同的 renderInput() 方法）。我不明白您所说的“在已加载的选项之上提示自动完成下拉菜单...”是什么意思。您可以在原始帖子中添加屏幕截图吗？
我刚刚添加了一个截图，这就是问题所在。
这很奇怪。以前从未见过这样的事情。几乎看起来像是某些特定于 chrome 的行为，或者附加到某种 chrome 扩展，但我无法在本地重新创建它（我在 Mac 上使用最新的 Chrome）。