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

Question

I made this very simple codesandbox to show my problem.

When I click the 'x' icon that appears after adding isClearable to the Select component, it both clears the selection AND it also opens the dropdown. I do not want to open the dropdown menu, but I cannot figure out how to stop it. Any ideas?

This problem only exists on mobile browsers. The clear function works as expected on desktop browsers. To see the codesandbox on mobile, open Chrome devtools and click the "toggle device toolbar" button.

EDIT: Since I haven't received a response yet (22 hours), here are some more details. This discussion most closely resembles my issue. They discuss the cause may be due to the react-tap-event-plugin.

I have tried using the react-fastclick package since I thought it may be a delayed tap (long-pressing in mobile does not open menu).

I have tried adding a div around the Select component with the attribute onClick={e => { e.preventDefault(); e.stopPropagation(); }} onClick={e => { e.preventDefault(); e.stopPropagation(); }}

I have tried adding a dummy div, and calling document.getElementById("dummy").focus() at the end of the onChange event in the Select component.

EDIT 2: If you add an event break-point for the touchend event, click the 'x' causing the script to pause, then press F8 (resume script), the menu will not open. There must be some sort of delayed tap happening.

Answer 1

I have a hacky solution. I set pointer-events: null in the css for 50 milliseconds at the end of my onChange event function attribute within the Select component. If someone knows a less hacky way of making this work, please let me know!

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

Try to add this property to the Select component:

openMenuOnClick={false} 

Works for me, hope it does to you too.

Answer 3

check this

Still not working well at least, it will give you hint how to modify the default behavior.

Answer 4

Assuming you got some code like this

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

Then you have the same bug I had. The "isClearable" flag needs a value.

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

Hope it helps. ♥