单击isClearable图标（仅限移动设备时，如何阻止反应选择输入下拉菜单打开？

Question

我做了这个非常简单的codesandbox以显示我的问题。

当我单击将isClearable添加到“选择”组件后出现的“ x”图标时，它既清除选择，又打开下拉菜单。我不想打开下拉菜单，但无法弄清楚如何停止它。有什么想法吗？

此问题仅在移动浏览器上存在。清除功能可以在桌面浏览器上正常工作。要在移动设备上查看codeandbox，请打开Chrome devtools，然后单击“切换设备工具栏”按钮。

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

我曾尝试使用react-fastclick软件包，因为我认为这可能是延迟的点击（在手机中长按无法打开菜单）。>>

我已经尝试在Select组件周围添加具有属性onClick={e => { e.preventDefault(); e.stopPropagation(); }}的div

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

编辑2：如果为touchend事件添加事件断点，请单击“ x”以使脚本暂停，然后按F8（继续脚本），菜单将不会打开。必须有某种延迟的点击发生。

我制作了这个非常简单的codeandbox来显示我的问题。在将isClearable添加到Select组件后，单击出现的“ x”图标时，它既清除选择内容，又打开...

Answer 1

检查this

Answer 2

我有一个骇人听闻的解决方案。我在pointer-events: null组件内的onChange事件函数属性的末尾将css中的Select设置了50毫秒。如果有人知道如何轻松完成这项工作，请告诉我！