bokuweb/react-rnd

Dragging after setting disableDragging to false, while touch is still down

gunnartorfis opened this issue · 0 comments

I'm not sure if it is a bug or if I'm doing something wrong.

Overview of the problem

I'm using react-rnd version 10.3.7

My browser is: Google Chrome Version 105.0.5195.125

I am sure this issue is not a duplicate? Yes

Reproduced project

https://codesandbox.io/s/goofy-euler-3j4gl7

Description

I'm trying to replicate iOS's calendar app behaviour.

  • User long presses the element to enable editing mode
  • User should be able to drag the element directly after enabling it, not by releasing the touch and then interacting with the element.
  • I'm using "react-use" package's useLongPress

I've tried two approaches:

  1. Have inner div capture onTouch events and stop propagation if the editing state is false. I've tried using a Ref for the value as well since I thought the value hadn't been updated when the event handlers were triggered.
  2. Call react-use's onTouchStart and onTouchEnd inside react-rnd's onDragStart and onDragEnd.

Steps to Reproduce

Toggle disableDragging while touch/mouse down is active and observe dragging not being possible unless lifting the touch/mouse and redrag.

Expected behavior

I would like to be able to drag after setting the disableDragging to false.