[HoverCard] Text selection improvements

[vladmoroz]

Feature request

Improve text selection usability/accessibility in the Hover Card:

• When selecting text in the Hover Card, don't allow the selection to spill out of the Hover Card bounds.
• Don't close Hover Card on mouse out if there's an active text selection; require an additional pointer down instead.

Examples in other libraries

VS Code hover card

[akevinge]

Hey @vladmoroz and to anyone else who may be working on this.

It's quite simple to implement a lock when there is an active text selection, but disallowing the selection to spill out is difficult.

• Using e.preventDefault() on any event other than 'selectstart' does not prevent the text from being highlighted (as such, removing the selection through the Selection API looks wacky because it appears then disappears)
• The mouse location is not included with the 'selectstart' event object and even if its was, the event only fired when the selection starts
• I got desperate so I tried adding an element similar to the one described by ::backdrop. I don't know why, but if you start highlighting in the hover card and slide your mouse outside the card... you can highlight text which is hidden beneath another element: https://codesandbox.io/s/gallant-cloud-xlkn57?file=/App.js

I looked into VS Code's hover cards, but it didn't help much.

This is all I've found, but I'm sure someone else could come up with better solutions.