After working on https://github.com/huridocs/react-text-selection-handler/pull/12 to improve onDeselect we noticed a problem. Previous to that PR, onDeselect only worked when clicking within HandleTextSelection component. This was a problem (https://github.com/huridocs/react-text-selection-handler/issues/7) because clicking anywhere else on the screen did not trigger onDeselect. So the onDeselect function was not called consistently, and the experience was spotty for the user (sometimes they lost the selection, sometimes they didn't) .
https://github.com/huridocs/react-text-selection-handler/pull/12 Attempted to fix this by listening to the global events in the dom and triggering the onDeselect function consistently: when the user had something selected and clicked in other areas of the screen onDeselect would be called.
After implementing this and seeing it in action we noticed that automatically triggering onDeselect is not the correct behavior. Currently, if the user has some selections, and then clicks anywhere on the screen, the selection goes away. If the users is clicking on other buttons of the UI trying to do something with the selection it feels like they lost it and have to select again since the text is not painted anymore.
onDeselect should not happen automatically, it should be something explicitly triggered by the component using this library.
What we think would work:
The user paints some text withing the region.
The text gets highlighted with a given color (we explicitly highlight the text so we don't rely on the browsers text selection highlight)
The text remains highlighted and does not disappear if the user clicks anywhere on the screen.
onDeselect is made available as a function that can be imported, and called programmatically to clear the current selection when pertinent.
This would more closely mimic the behavior of text selection on other apps where selecting some text and clicking on a button does not automatically deselect text (eg: select text on a word processor and click on the bold or italic icons, the text remains selected).
After working on https://github.com/huridocs/react-text-selection-handler/pull/12 to improve
onDeselect
we noticed a problem. Previous to that PR,onDeselect
only worked when clicking withinHandleTextSelection
component. This was a problem (https://github.com/huridocs/react-text-selection-handler/issues/7) because clicking anywhere else on the screen did not triggeronDeselect
. So theonDeselect
function was not called consistently, and the experience was spotty for the user (sometimes they lost the selection, sometimes they didn't) .https://github.com/huridocs/react-text-selection-handler/pull/12 Attempted to fix this by listening to the global events in the dom and triggering the
onDeselect
function consistently: when the user had something selected and clicked in other areas of the screenonDeselect
would be called.After implementing this and seeing it in action we noticed that automatically triggering
onDeselect
is not the correct behavior. Currently, if the user has some selections, and then clicks anywhere on the screen, the selection goes away. If the users is clicking on other buttons of the UI trying to do something with the selection it feels like they lost it and have to select again since the text is not painted anymore.onDeselect
should not happen automatically, it should be something explicitly triggered by the component using this library.What we think would work:
onDeselect
is made available as a function that can be imported, and called programmatically to clear the current selection when pertinent.This would more closely mimic the behavior of text selection on other apps where selecting some text and clicking on a button does not automatically deselect text (eg: select text on a word processor and click on the bold or italic icons, the text remains selected).