<Select> component breaks if canvas size changes during box select

[romankoho]

• three version: 0.152.2
• @react-three/fiber version: 8.14.3
• @react-three/drei version: 9.104.1
• node version: 20.11.1
• npm (or yarn) version: 10.2.4

Problem description:

I have a layout with two columns. In the left column, I render the three-js scene and in the right column a HTML div that shrinks/expands its width depending on the state of a button.

When clicking a button, box-select of the component gets activated and the right column expands (the scene size.width shrinks respectively).

The problem: I have to wait until the right column is fully expanded and the canvas size updated. If I start dragging the selection box too early, the

component messes up. A selection box remains on the screen and the orbit controls do not work anymore. See this video of the behavior (the cursor was not recorded, I hope it still helps):

Select_bug.webm

Suggested solution:

I thought of adding an "enabled"-flag to the props. The component would only listen to mouse events if enabled = true. The user could control when to enable (in my case when the layout is ready)