Bug: after press Shift, mouse cannot move the pane anymore but drawing selection zone instead

[buitrung]

After press or hold Shift button, left mouse click will draw the selection zone.
I cannot move the pane around anymore and have to refresh page.

[chrtze]

hi, it is intended that while holding the shift button the selection gets drawn. you can disable this by setting elementsSelectable={false}. see also: https://reactflow.dev/examples/interaction/

from reading your comment I assume the selection still gets drawn when you already released the shift key. this might be happening because you unfocused the react-flow pane while drawing a selection. maybe this can be fixed by resetting the selection on mouseout / blur of the renderer.

[buitrung]

Hi @chrtze,

hi, it is intended that while holding the shift button the selection gets drawn. you can disable this by setting elementsSelectable={false}. see also: https://reactflow.dev/examples/interaction/

I understand it's the intention to draw the selection zone when holding Shift because that's pretty much a popular behavior, but releasing Shift doesn't returns what I can do sooner so I consider this is a bug. Even in your example link, after pressing Shift, I can neither move the pane or move nodes or click on elements to select, but can only draw selection zone (surely I have toggle all the checkboxes on).

from reading your comment I assume the selection still gets drawn when you already released the shift key. this might be happening because you unfocused the react-flow pane while drawing a selection. maybe this can be fixed by resetting the selection on mouseout / blur of the renderer.

Can you provide the code sample? I don't see anything related in the docs.

[buitrung]

Plus, after press Shift, I click on a node to select it, then I click on the pane, the console shows this error:

Warning: `NaN` is an invalid value for the `width` css style property.
    in div (created by NodesSelection)
    in DraggableCore (created by Draggable)
    in Draggable (created by NodesSelection)
    in div (created by NodesSelection)
    in NodesSelection (created by GraphView)
    in div (created by GraphView)
    in GraphView (created by ReactFlow)
    in StoreProvider (created by ReactFlowWrapper)
    in ReactFlowWrapper (created by ReactFlow)
    in div (created by ReactFlow)
    in ReactFlow (created by FlowEditor)

[moklick]

The commit above fixes the NaN warning. The other problem still exists.

[chrtze]

hi @buitrung, could you check if it works with the next version, we now reset the key state when the window loses focus.

npm i react-flow-renderer@next