Detecting touch taps and double taps while using react-draggable

[javismiles]

trafficstars

I'm using this great library to add dragging functionality to components and it works great. However, I have the following issue:

• Before I was using this library, I could capture the standard click and double click events and they would work for both mouse and touch devices domNode.addEventListener('click', (event) => {}); domNode.addEventListener('dblclick', (event) => {});

• But now that I'm using this library, the click and dblclick events are only being triggered for mouse inputs, but not for touch devices, how can I detect touch taps and double taps while using this library?

thank you :)

[javismiles]

I have just confirmed that I have: <Draggable {...dragHandlers} > <div id={props.id} ref={myRef} onClick={clickedMe} etc...

the onClick event will only fire on mouse clicks but not on touch taps,

but if I eliminate the draggable and only use:

<div id={props.id} ref={myRef} onClick={clickedMe} etc..

then the onClick event will fire on both mouse and touch tap events

how can I maintain your component wrapping it all while still being able to have onClick fire on both mouse and touch tap events?

thank you :)

[asile12]

I'm having the same problem 😢

[asile12]

if someone is looking for a temporary fix, I managed to make it work with this

<Draggable {...dragHandlers} >
  <div 
    id={props.id} 
    ref={myRef} 
    onClick={clickedMe} 
    onTouchEnd={clickedMe}  // <-- this
    etc...

[l0g1c-80m8]

So the issue is on touch, the drag start event gets called and it kind of overrides the touch event. If you observe you'll be able to drag it around too. So the work around I have used is to do something like the following:

const handleOnDragStop = e => {
    const { target, type } = e;
    if (type === 'touchend') target.click();
    return true;
  };

...

<Draggable
    ...
    onStop={handleOnDragStop}
    ...
>
        ...
</Draggable>

[sachinksachu]

I also faced this issue, touch was not working in mobile screen. so I added onTouchStart attribute to call the function onTouchStart={()=> clickedMe()} Got the solution from : https://github.com/react-grid-layout/react-draggable/issues/550