Moveable drag box is not updating after a redux update

[grantspilsbury]

Environments

• react 18.1.8
• react-moveable 0.38.4

Description

I am trying to reset a moveable box with a reset button but after the button is clicked the drag box doesn't reset to the new position.

After reset

import { useRef } from 'react'
import Moveable from 'react-moveable'

const TextPanel = ({ reset }) => {
  return (
    <button
      onClick={() => {
        reset({
          translate: [screenWidth / 2, screenHeight / 2],
          rotate: 0,
          scale: [1, 1],
        })
      }}>
      Reset
    </button>
  )
}

const App = () => {
  const moveableRef = useRef(null)

  const handleResetClick = () => {
    dispatch({
      type: 'UPDATE',
      text: {
        translate: [500, 500],
        rotate: 0,
        scale: [1, 1],
      },
    })
    moveableRef.current.updateRect()
  }

  return (
    <>
      <TextPanel reset={handleResetClick} />
      <Moveable
        ref={moveableRef}
        target={target}
        snappable={true}
        draggable={true}
        rotatable={true}
        throttleDrag={0}
        startDragRotate={0}
        throttleDragRotate={0}
        scalable={true}
        keepRatio={false}
        edge={false}
        zoom={1}
        origin={true}
        bounds={bounds}
        onDrag={(e) => {
          updateValue({ translate: e.beforeTranslate })
        }}
        onRotate={(e) => {
          updateValue({ rotate: e.beforeRotation })
        }}
        onScale={(e) => {
          updateValue({ scale: e.scale })
        }}
      />
    </>
  )
}

export default App

I have tried to add a useEffect hook just in case it is a timing issue without success

  useEffect(() => {
    moveableRef.current.updateRect()
  }, [moveableRef, selectedText, target])

[daybrush]

hi. moveable doesn't support async yet.

It will be reset properly after an update.

Check it with requestAnimationFrame or setTimeout.