The event "mousedown" is not fired on mobile properly

[dmitrika]

I'm using 'react-dates' library and on my iphone5 handler onOutsideClick is not fired properly.
It's fired when I click on the button, but not if I click on an empty space background.

I've added 'touchstart' event for my component and now it's fine.

Can we extend current event listener with touchstart?

[giamir]

I am experiencing the same issue on iPad. I made a workaround for the issue by doing something like this in my component:

componentDidMount() {
    document.addEventListener('touchstart', this.onTouchStartHandler)
  }

  componentWillUnmount() {
    document.removeEventListener('touchstart', this.onTouchStartHandler);
  }

  onTouchStartHandler = ({ target }) => {
    if(this.datePickerRef.current.contains(target)) {
      this.setState({ focused: true });
    } else {
      this.setState({ focused: false });
    }
  };

where datePickerRef is a React ref to the DOM node where the my react SingleDatePicker is mounted.
We should probably consider extending the current event listener so that they listen to mousedown, touchstart and perhaps even the new pointerdown.

[majapw]

So, I had this conversation with @aarongloege when the change was made to react-dates. Here's the convo from #1:

was listening for the click event, which can be triggered if a user mouses down inside the component, drags their mouse outside the component, and releases. In most cases, this is not the desired behavior.

We solve this currently by using onMouseDown/onMouseDown. This should be fine for touch devices due to the W3C spec definition, but I want to double-check. cc @aarongloege

From the [W3C spec](W3C spec):
If the user agent interprets a sequence of touch events as a click, then it should dispatch mousemove, mousedown, mouseup, and click events (in that order) at the location of the touchend event for the corresponding touch input.

@ljharb @garrettberg do you have any thoughts on this?

[ljharb]

Unless react changed its behavior (which would be a breaking change we’d have heard about) i would expect click to be sufficient to cover touch devices.

[majapw]

@ljharb we're no longer using click for the reasons I've cited above. We are using mousedown because the spec suggests that that should also trigger on touch devices.

[nkinser]

@majapw @ljharb I'm having the same issue with the pdp bookit calendar. Here's the related jira ticket. Should I use the workaround posted above to fix this?