search

recogito / text-annotator-js

A JavaScript library for text annotation.
BSD 3-Clause "New" or "Revised" License
22 stars 7 forks source link

#172 Added popup hiding when the annotation's target is actively updated #174

Open oleksandr-danylchenko opened 2 weeks ago

oleksandr-danylchenko commented 2 weeks ago

Issue - https://github.com/recogito/text-annotator-js/issues/172

I noticed that when the TextAnnotatorPopup is rendered and I move to select text down rapidly - the finger can go over the floating element and cause the highlight flickering:

https://github.com/user-attachments/assets/ebdb8383-c4f1-4f49-859e-1ffd7d1818b7

That's because the selection can accidentally go over the popup element that's portalled out of the annotatable content container at the bottom. So the selection just glues to its edge for a moment.

Changes Made

I added an idling listener that renders the popup only when there are no updates to the annotation's target for some time. The "update" is recognized when the quote updates. Otherwise, the popup shouldn't be concerned about the updates for the rest of the properties. That prevents an accidental overlap with the user's touch and repositioning on the selection correction over the whitespace.

I also tried another alternative - making the popup act like the native context menu. However, its tracking turned out to be super unreliable and complex. So I retreated to a more pragmatic option.

oleksandr-danylchenko commented 2 weeks ago

*The changes in this PR passed the QC on our side and the user can no longer react to the popup during the selection ✔️

https://github.com/user-attachments/assets/1b52dd09-56de-4c31-8085-e2f9c11ed2b3