xyflow: Selecting nodes causes exception when using immutable library (Immer with Redux Toolkit)
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 ‘#<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
- Press and hold down Shift
- 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
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Reactions: 2
- Comments: 15 (6 by maintainers)
Commits related to this issue
- fix(react): return user nodes for selection change handlers closes #3904 — committed to xyflow/xyflow by moklick 2 months ago
- fix(selection): return new edge objects closes #3904 — committed to xyflow/xyflow by moklick 2 months ago
The reason for this bug is the
onSelectionChangehandler. Will be fixed in the next release - for now you can can remove the handler and it should work as expected.@dsoklic thanks, now I get it too. I will check it!
@peterkogo Sorry, I didn’t change the permissions to the sandbox. Could you try it again?