Unselect selected elements on blur

[Keshav-Madhav]

What is the problem? After selecting desired elements, clicking outside any selectables but inside the selection area should un-select the selected elements.

What is the current behavior? Clicking outside the selectables but still inside the selection area does not clear the selection. Clicking on a selectable when multiple elements are selected correctly clears the selection and selects the new selectable.

What is the expected behavior? Clicking anywhere inside the selection area should clear the selected items unless the shift or ctrl key is pressed.

[Keshav-Madhav]

I just tried to further experiment with it, and in the selectionarea wrapper provided, onStart only triggers when an selectable area is clicked or drag is started. This makes it such that if i drag an empty area, the selected files get unselected as desired, but i want the same behavior for a simple click.

The selectionarea also does not respond to event listeners such as onClick or onMouseDown so i could not add the desired effect on my own.

[simonwep]

The selectionarea also does not respond to event listeners such as onClick or onMouseDown so i could not add the desired effect on my own.

You can just add a listener to the selection-area by yourself and clear the selection if there hasn't been a selection between the pointerdown and pointerup events, or something like this :)

[lanyeeee]

having the same problem.

[lanyeeee]

You can just add a listener to the selection-area by yourself and clear the selection if there hasn't been a selection between the pointerdown and pointerup events, or something like this :)

That solves part of the problem, but selection cleared when clicking or dragging the scrollbar(scrollbars are part of the selection-area)

[Keshav-Madhav]

You can just add a listener to the selection-area by yourself and clear the selection if there hasn't been a selection between the pointerdown and pointerup events, or something like this :)

That solves part of the problem, but selection cleared when clicking or dragging the scrollbar(scrollbars are part of the selection-area)

@simonwep I had the same problem described by lanyeeee. I had come up with a similar approach for the required functionality and i ran into the same issue where scrollbar interaction also unselected the selected elements. I'll share exactly what I did for reference.

useEffect(() => { const handleClick = (event: MouseEvent) => { if ( event.button === 0 && !event.ctrlKey && !event.metaKey && filesystemRef.current && event.target === filesystemRef.current ) { removeAllFiles(); } };

document.addEventListener('mousedown', handleClick);
return () => {
  document.removeEventListener('mousedown', handleClick);
};

}, []);

In this approach, clicking on the selected elements would also unselect all files by calling "removeAllFiles()" and then select the element I clicked on. But since I am implementing a file manager, this behavior is intended. The only issue is with scrollbar as i do not know how to check for that specific event.

[simonwep]

Alright, I can see that this is difficult to implement outside of the core library, I'll make this a feature and have a look into it :)