Как остановить раскрывающееся меню ввода реакции и выбора при нажатии на значок isClearable (только для мобильных устройств)?

Question

Я сделал это очень просто codesandbox , чтобы показать мою проблему.

Когда я нажимаю значок «х», Появляется после добавления isClearable к компоненту Select, одновременно очищает выделение и открывает раскрывающийся список. Я не хочу открывать выпадающее меню, но не могу понять, как его остановить. Есть идеи?

Эта проблема существует только в мобильных браузерах. Функция очистки работает, как и ожидалось, в настольных браузерах. Чтобы увидеть коды и ящик на мобильном устройстве, откройте Chrome devtools и нажмите кнопку «Переключить панель инструментов устройства».

РЕДАКТИРОВАТЬ: Поскольку я еще не получил ответ (22 часа), вот еще некоторые подробности. Эта дискуссия больше всего напоминает мою проблему. Они обсуждают причину, возможно, из-за реагирующего-плагин-события-плагина.

Я пытался использовать пакет реагировать-фастклик, так как я думал, что это может быть отложенное нажатие (долгое нажатие в мобильном телефоне не открывается меню).

Я попытался добавить div вокруг компонента Select с атрибутом onClick={e => { e.preventDefault(); e.stopPropagation(); }}

Я попытался добавить фиктивный div и вызвать document.getElementById("dummy").focus() в конце событие onChange в компоненте Select.

РЕДАКТИРОВАТЬ 2: Если вы добавили точку останова для события touchend, нажмите «x», вызывая паузу в скрипте, затем нажмите F8 (возобновить скрипт), меню не откроется. Должно быть какое-то замедленное нажатие.

Answer 1

У меня есть хакерское решение. Я установил pointer-events: null в css на 50 миллисекунд в конце моего onChange атрибута функции события в компоненте Select. Если кто-то знает менее хакерский способ сделать эту работу, пожалуйста, дайте мне знать!

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 2

check this

По крайней мере, по-прежнему не работает должным образом, это даст вам подсказку, как изменить поведение по умолчанию.