如何在单击isClearable图标时停止打开react-select input下拉菜单(仅限移动设备)？
我制作了这个非常简单的codesandbox来显示我的问题。
当我点击在将isClearable添加到选择组件后出现的'x‘图标时，它既清除了选择，又打开了下拉列表。我不想打开下拉菜单，但我不知道如何停止它。有什么想法吗？
这个问题只存在于手机浏览器上。clear函数在桌面浏览器上的工作方式与预期一致。要在移动设备上查看codesandbox，请打开Chrome devtools并单击“切换设备工具栏”按钮。
编辑:由于我还没有收到回复(22小时)，这里有更多的细节。This discussion与我的问题最为相似。他们讨论了原因可能是由于react-tap-event-plugin。
我试过使用react-fastclick包，因为我认为这可能是一个延迟的点击(在手机中长按不能打开菜单)。
我尝试使用onClick={e => { e.preventDefault(); e.stopPropagation(); }}属性在Select组件周围添加一个div
我尝试添加一个虚拟div，并在Select组件中的onChange事件结束时调用document.getElementById("dummy").focus()。
编辑2:如果您为touchend事件添加了一个事件断点，单击导致脚本暂停的'x‘，然后按F8 (恢复脚本)，菜单将不会打开。一定有某种延迟的窃听发生了。
回答 4
Stack Overflow用户
发布于 2020-04-30 02:44:16
我有一个老生常谈的解决方案。在Select组件的onChange事件函数属性的末尾，我在css中设置了50毫秒的pointer-events: null。如果有人知道一种不那么老套的方法，请让我知道！
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"))
}Stack Overflow用户
发布于 2020-12-22 21:31:23
尝试将此属性添加到Select组件：
openMenuOnClick={false} 对我有效，希望对你也有效。
Stack Overflow用户
发布于 2020-04-29 11:18:23
检查this
仍然不能很好地工作，至少它会给你提示如何修改默认行为。
https://stackoverflow.com/questions/61472882
复制相似问题
腾讯云开发者
