(Sporadic) Error in Gesto.move component on rotating/scaling (Cannot read properties of undefined (reading 'prevClients')

[HolgerSeith]

Environments

• Framework name: React
• Framework version: 18.2
• Moveable Component version: 0.50.7
• Testable Address(optional): unfortunately none

Description

(Thanks alot for your amazing library!)

We get the following sparadic (does not occur each time) error on rotating or scaling. (Seems to happen if you execute rotating / scaling several times)
Similar error is described here: #695 (we have no edge dragging active)
Wo do not have any clue what the problem is or how to fix/workaround it.

Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'prevClients') at Gesto.move (d:\dev\application\node_modules\gesto\src\Gesto.ts:161:9) at setCustomDrag (d:\dev\application\node_modules\react-moveable\src\gesto\CustomGesto.ts:12:5) at fillTransformEvent (d:\dev\application\node_modules\react-moveable\src\gesto\GestoUtils.ts:462:5) at dragControl (d:\dev\application\node_modules\react-moveable\src\ables\Scalable.ts:375:16) at trigger (d:\dev\application\node_modules\react-moveable\src\gesto\getAbleGesto.ts:89:9) at <anonymous> (d:\dev\application\node_modules\react-moveable\src\gesto\getAbleGesto.ts:134:51) at <anonymous> (d:\dev\application\node_modules\react-moveable\src\gesto\getAbleGesto.ts:134:9) at triggerAble (d:\dev\application\node_modules\react-moveable\src\gesto\getAbleGesto.ts:116:5) at <anonymous> (d:\dev\application\node_modules\react-moveable\src\gesto\getAbleGesto.ts:296:17) at <anonymous> (d:\dev\application\node_modules\@scena\event-emitter\src\EventEmitter.ts:150:13) at __proto.emit (d:\dev\application\node_modules\@scena\event-emitter\src\EventEmitter.ts:149:9) at Gesto._this.onDrag (d:\dev\application\node_modules\gesto\src\Gesto.ts:409:17)

Configuration of Moveable:

      <Moveable
        ref={moveableRef}
        origin={true}
        pinchOutside={false}
        pinchable={false}
        snappable={true}
        draggable={true}
        scalable={true}
        target={targetRef}
        keepRatio={keepRatio}
        rotatable={true}
        isDisplaySnapDigit={false}
        isDisplayInnerSnapDigit={false}
        snapDirections={{
          top: true, left: true, bottom: true, right: true, center: true, middle: true,
        }}
	       onDragEnd={
          (e) => {
            if (!e.isDrag) {
              return;
            }
              ...
             }	
		...
/>

[daybrush]

@HolgerSeith

I'm not sure why either.

I have a few questions about errors.

1. Is there code that calls .stopDrag?
2. Have you ever tried multitouch?
3. Has the cursor ever left the window?
4. Has the target ever changed? (set, release, change)

[HolgerSeith]

1. No
2. No
3. No
4. (probably) no.

I have managed to reproduce my problem: https://codesandbox.io/s/react-moveable-forked-129q8e?file=/src/App.tsx
(I don't know, whether that is a valid scenario.)
Steps:

1. Move rectangle to different position
2. Scale the rectangle

Happens on mouseDown at 2.).
Just happens if you execute the 2nd step quickly after the first.

[daybrush]

@HolgerSeith

I think it's a React 18 async issue.

It is recommended to use flushSync to use Moveable in React 18.
import { flushSync } from "react-dom";

<Moveable
    flushSync={flushSync} />

[HolgerSeith]

Thanks a lot; works for me.

(I close the issue as "completed"; not 100% sure whether that is correct)

[johnsoncherian]

I face the same issue in my app. But only when I try to resize a component for the first time. If I try again it starts working. flushSync does not work. The targets change dynamically in my app. Any help appreciated. Thanks in advance