search

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
22.07k stars 1.46k forks source link

Selecting nodes causes exception when using immutable library (Immer with Redux Toolkit) #3904

Closed dsoklic closed 1 month ago

dsoklic commented 4 months ago

Describe the Bug

I'm using Redux Toolkit for my application. When I select a few nodes by drawing a rectangle, I get the exception that says: Cannot assign to read only property 'selected' of object '#'.

This issue happens because Redux Toolkit uses Immer under the hood, but React-flow tries to mutate the data. I was able to track down the issue to the getSelectionChanges function, where the selected property is mutated.

I tested this on React-flow v11.10.1 and v12, it happens with both.

Your Example Website or App

https://codesandbox.io/p/sandbox/selection-with-redux-reactflow11-mkd4ql

Steps to Reproduce the Bug or Issue

  1. Press and hold down Shift
  2. Start drawing the selection rectangle. Try moving it around, selecting and unselecting a few nodes. Keep selecting and unselecting nodes for a few seconds.

Very soon you should get the exception.

Expected behavior

No exception should be thrown

Screenshots or Videos

No response

Platform

  • OS: Windows
  • Browser: Brave and Electron
  • Version: Brave v1.62.156

Additional context

Seems to be related to https://github.com/xyflow/xyflow/issues/2170

peterkogo commented 4 months ago

@dsoklic I can't open your sandbox. If you update it, I can take a look

dsoklic commented 4 months ago

@peterkogo Sorry, I didn't change the permissions to the sandbox. Could you try it again?

gorbatkoff commented 2 months ago

Any updates?

moklick commented 2 months ago

Hey, could you check with the latest v12 release?

dsoklic commented 2 months ago

@moklick I tried it out with the latest v12, and I still get this issue. It required some more selecting and unselecting, but eventually, I got the same error. Link to the sandbox: link

gorbatkoff commented 2 months ago

In another issue the guy advised making the state immutable https://github.com/xyflow/xyflow/issues/2240 Снимок экрана 2024-04-16 в 11 11 22

moklick commented 2 months ago

@dsoklic thanks for the codesandbox! I can't repro it with v12 there 🤔

dsoklic commented 2 months ago

@moklick I recorded a video, so you can see what steps I did: video

Sometimes you need to keep selecting and unselecting for a while to get this error. In my video, it just coincidentally happened so fast.

dsoklic commented 2 months ago

In another issue the guy advised making the state immutable #2240 Снимок экрана 2024-04-16 в 11 11 22

The replies in that thread already say what I wanted to say: using a state management library is recommended in the docs, and making the state immutable is a feature that avoids issues. React Flow shouldn't be mutating the state.

moklick commented 2 months ago

@dsoklic thanks, now I get it too. I will check it!

moklick commented 2 months ago

The reason for this bug is the onSelectionChange handler. Will be fixed in the next release - for now you can can remove the handler and it should work as expected.

gorbatkoff commented 2 months ago

When will the next release be? And what will be the title of the release? 11.11.2?

moklick commented 1 month ago

Fixed in 11.11.2 and 12.0.0-next.15

gorbatkoff commented 1 month ago
Снимок экрана 2024-04-23 в 13 48 03 Снимок экрана 2024-04-23 в 13 46 56

I still get this error even after installing 11.11.2

gorbatkoff commented 1 month ago

I found a solution for preventing this error, but it looks not good. Look at the commented code.

Снимок экрана 2024-04-23 в 13 49 13
  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.