单击 isClearable 图标（仅限移动设备）时，如何阻止打开 react-select 输入下拉菜单？

Question

我把这个做得很简单codesandbox来说明我的问题。

当我单击将 isClearable 添加到 Select 组件后出现的 'x' 图标时，它会清除选择并打开下拉菜单。我不想打开下拉菜单，但我不知道如何停止它。有什么想法吗？

此问题仅存在于移动浏览器上。 clear 函数在桌面浏览器上按预期工作。要在移动设备上查看 codesandbox，请打开 Chrome devtools 并单击 "toggle device toolbar" 按钮。

编辑：由于我还没有收到回复（22 小时），这里有更多详细信息。 This discussion 最接近我的问题。他们讨论原因可能是由于react-tap-event-plugin。

我尝试过使用 react-fastclick 包，因为我认为它可能是延迟点击（在移动设备中长按不会打开菜单）。

我尝试在 Select 组件周围添加一个 div 属性 onClick={e => { e.preventDefault(); e.stopPropagation(); }}

我尝试添加一个虚拟 div，并在 Select 组件的 onChange 事件结束时调用 document.getElementById("dummy").focus()。

编辑 2：如果为 touchend 事件添加事件断点，单击 'x' 导致脚本暂停，然后按 F8（恢复脚本），菜单不会打开。一定是发生了某种延迟点击。

Answer 1

检查this

至少仍然不能很好地工作，它会给你提示如何修改默认行为。

Answer 2

我有一个 hacky 解决方案。我在 Select 组件内的 onChange 事件函数属性结束时将 css 中的 pointer-events: null 设置为 50 毫秒。如果有人知道使这项工作更简单的方法，请告诉我！

temporarilyDisable = () => {
  const elementToDisable = document.getElementById('selectComponentID');
  const wait = ms => new Promise((r, j)=>setTimeout(r, ms))
  elementToDisable.setAttribute("style", "pointer-events: none")
  let prom = wait(50).then(() => elementToDisable.setAttribute("style", "pointer-events: all"))
}

Answer 3

假设你有这样的代码

<Select
    isClearable
    options={options}
    //..
/>

那么你遇到了和我一样的错误。 “isClearable”标志需要一个值。

<Select
    isClearable={true}
    options={options}
    //..
/>

希望对您有所帮助。 ♥

Answer 4

尝试将此属性添加到 Select 组件：

openMenuOnClick={false}

对我有用，希望对你也有用。

单击 isClearable 图标（仅限移动设备）时，如何阻止打开 react-select 输入下拉菜单？

How do I stop the react-select input dropdown menu from opening when click the isClearable icon (mobile only)?

html

javascript

dom-events

reactjs

react-select