Floating rect selection disappears on blur

[YuryBecker]

First, thank you for creating this component. Amazing work! I know how complicated this is, and I appreciate your work here. It saved me tons of time.

Regarding the issue, when you click anywhere else, the selection rectangle (.Spreadsheet__floating-rect) disappears. This makes sense most of the time, but if you click on a different window, the selection still disappears.

This is an issue because you may highlight some cells that you want to focus on and if you're writing a document in another window, as soon as you click on the document, the selection disappears.

The same issue occurs if you build a page with the spreadsheet on one side and something related on the other. You make a selection on one side and do something with it on the other. But currently, you can't do this because as soon as you click anywhere, even if it's on a completely separate component, the selection will disappear.

[iddan]

Hey @YuryBecker, thanks for the detailed feedback. The rational for this behaviour was that the spreadsheet should act like any other input in the page: when you blur - select disappears. That being said I understand your issues and open for better suggestions. What do you have in mind?

[YuryBecker]

Hi Iddan,

That makes sense. However, regarding spreadsheets, I believe the event should be localized to the component itself, not the whole window, with the primary reason being the loss of selection highlight. Without that capability, you can only use the spreadsheet component by itself and cannot incorporate it with another component to augment your current selection.

The simplest fix, I believe, is to keep the current behavior as the default but allow the developer to customize the handling via onBlur. That's what I initially tried to do, i.e., e => e.preventDefault();.

Another option is to enable it through flags, such as hideSelectionOnBlur