Skip to content

Incorrect positioning when component becomes controlled in React 18 #910

Closed
@roman-pauk

Description

@roman-pauk

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

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