react-query-assist icon indicating copy to clipboard operation
react-query-assist copied to clipboard

Published 20 hours ago • verified publisher icon vectordotdev

Highlighting token pairs does not work

Open zsherman opened this issue 6 years ago • 3 comments

Quick gif demonstrating the issue https://cl.ly/0H1r123U350r.

zsherman avatar Mar 04 '18 03:03 zsherman

Good catch.

jsonmaur avatar Mar 04 '18 05:03 jsonmaur

Thought it would be a simple fix, but this uncovered another issue: https://cl.ly/2D4404372y1O

The input overlay currently has pointer-events: none to allow select/click events to pass through to the input itself. But I had to counteract that with pointer-events: auto on the highlighted tokens, to allow for the click and hover events. So the problem is when you start a selection inside the token and try to drag to non-token text, it breaks since you're selecting text in the overlay span rather than the input itself.

Not really sure how to get around this other than disabling the hover effect and click event on the highlighted token. Any ideas?

jsonmaur avatar Mar 04 '18 06:03 jsonmaur

Why not store the up/down click state of the cursor? When the mouse state is down you know can allow selecting of the textarea, when it's up you can display the overlay.

zsherman avatar Mar 04 '18 16:03 zsherman