Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect positioning when component becomes controlled in React 18 #910

Closed
roman-pauk opened this issue Aug 15, 2023 · 4 comments · Fixed by #924
Closed

Incorrect positioning when component becomes controlled in React 18 #910

roman-pauk opened this issue Aug 15, 2023 · 4 comments · Fixed by #924

Comments

@roman-pauk
Copy link

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
Copy link

Taapo commented Oct 8, 2023

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

@zoated
Copy link

zoated commented Mar 25, 2024

Same here!How should I solve this problem

@dan-cooke
Copy link

dan-cooke commented Mar 30, 2024

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)

bokuweb added a commit that referenced this issue Apr 20, 2024
@bokuweb bokuweb mentioned this issue Apr 20, 2024
bokuweb added a commit that referenced this issue Apr 20, 2024
* fix: #910

* 10.4.2
@bokuweb
Copy link
Owner

bokuweb commented Apr 20, 2024

@roman-pauk Plase use 10.4.2. https://codesandbox.io/p/sandbox/bitter-bush-3t5cvz?file=%2Fsrc%2FDnd.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants