Skip to content

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

Open
@gunnartorfis

Description

@gunnartorfis

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions