bokuweb/react-rnd

Incorrect positioning when component becomes controlled in React 18

roman-pauk opened this issue · 4 comments

roman-pauk commented

Overview of the problem

I'm using react-rnd version [10.4.1]
react, react-dom version: 18.2.0

My browser is: Chrome Version 115.0.5790.170 (Official Build) (arm64)

Reproduced project

https://codesandbox.io/s/naughty-shape-hz4t3r

Description

I store the position of RnD element in the redux store. But when I pass the stored value back to the component the positioning doesn't work properly(see the codesandbox)
Same happens if you try to store the position to the react state

Steps to Reproduce

  1. Create a wrapper component for RnD with some width and height
  2. Put the RnD component inside the wrapper and set bounds="parent" property
  3. Create a redux reducer and action
  4. Dispatch the action on every onDrag event with new position
  5. Pass the position from redux store back to the RnD component

Expected behavior

The RnD component follows mouse movement

Actual behavior

The RnD component quickly moves to the bottom right corner and stays there

Taapo commented

Same here! Storing position in IndexedDB, when restoring it's not positioning correctly.

zoated commented

Same here!How should I solve this problem

dan-cooke commented

I had similar issues this repo is basically unmantained at this point - I forked it here https://github.com/dan-cooke/react-redrag

And made the following changes

#920

The problem lines are https://github.com/bokuweb/react-rnd/pull/920/files#diff-0b5adbfe7b36e4ae2f479291e20152e33e940f7f265162d77f40f6bdb5da7405L242-L248

Where the component will always update the inital state value by applying the parent offset delta.. this may or may not be the correct thing to do. But I have removed it and its working as intended for my use case now.

ie. I can set default and these values will be excactly reflected on mount, prior to this the draggable would "jump"
by the parent offset pixels on mount

Feel free to pull my changes - I may release react-redrag as a fork of this repo some day and perform the much needed maintenance

Realistically this repo is just a wrapper around react-draggable and react-resizable so it shouldn't be too hard to mantain (famous last words)

  • 😄1