React-select: does not work in Firefox on touch+mouse hybrid devices (like a laptop with a touch screen)

[do-pe]

The dropdown opens and then immediately closes again. You are not able to select anything.

It happens even on the latest version in the demos on react-select.com

It already was like that in 2.2.0 and maybe before that as well.

---

Can be reproduced in a regular version of Firefox (no touch devices needed) on react-select.com:

Use the devtools to go into the "responsive" mode (CTRL+SHIFT+M) and activate touch emulation.

The dropdown has to be initialized with touch already activated - so reload the page after activating touch emulation.

Tested in Firefox 66 on Windows 10.

---

I think the problem is as follows:
onControlMouseDown gets called when you touch it. The dropdown opens. Then onControlTouchEnd is called as well and that closes the dropdown again.

I tried myself at a fix, but I don't know if it's good enough or if it breaks anything else.

In Select.js:

  onControlTouchEnd = (event: SyntheticTouchEvent<HTMLElement>) => {
    if (this.userIsDragging) return;

    /* Firefox on a desktop touch device calls this after opening the menu, which
     closes it again. It fires both mousedown and touchend. */
    if (isTouchCapable() && isFirefox()) return;

    this.onControlMouseDown(event);
  };

  onDropdownIndicatorTouchEnd = (event: SyntheticTouchEvent<HTMLElement>) => {
    if (this.userIsDragging) return;

    /* Firefox on a desktop touch device calls this after opening the menu, which
     closes it again. It fires both mousedown and touchend. */
    if (isTouchCapable() && isFirefox()) return;

    this.onDropdownIndicatorMouseDown(event);
  };

added in util.js:

export function isFirefox() {
  try {
    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  } catch (e) {
    return false;
  }
}

[do-pe]

It still happens in Firefox 67

[bkbooth]

Yep, I just discovered this issue happening for me too (Firefox 69). Is there a fix or workaround?

[eriwin]

This issue is still present in Firefox 70.0 (64-bit).

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!