Skip to content

Incorrect positioning when component becomes controlled in React 18 #910

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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