Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 13 commits into
base: main
Choose a base branch
from

Conversation

oleksandr-danylchenko
Copy link
Contributor

@oleksandr-danylchenko oleksandr-danylchenko commented Nov 6, 2024

Issue - #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:

Record_2024-11-04-15-32-39.mp4

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 oleksandr-danylchenko marked this pull request as ready for review November 6, 2024 15:00
# Conflicts:
#	packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
#	packages/text-annotator-react/test/App.tsx
@oleksandr-danylchenko
Copy link
Contributor Author

oleksandr-danylchenko commented Nov 11, 2024

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

idle_popup.mp4

@oleksandr-danylchenko oleksandr-danylchenko marked this pull request as draft November 13, 2024 17:28
@oleksandr-danylchenko oleksandr-danylchenko marked this pull request as ready for review November 18, 2024 12:52
@oleksandr-danylchenko oleksandr-danylchenko force-pushed the #172-fix-popup-flickering-selection branch 4 times, most recently from f8f7604 to 7f7aa5b Compare November 18, 2024 13:05
@oleksandr-danylchenko oleksandr-danylchenko force-pushed the #172-fix-popup-flickering-selection branch from 7f7aa5b to 40fb398 Compare November 18, 2024 13:28
Comment on lines +58 to +66
const hasTargetQuoteChanged = (oldValue: TextAnnotationTarget, newValue: TextAnnotationTarget) => {
const { selector: oldSelector } = oldValue;
const oldQuotes = oldSelector.map(({ quote }) => quote);

const { selector: newSelector } = newValue;
const newQuotes = newSelector.map(({ quote }) => quote);

return !dequal(oldQuotes, newQuotes);
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inspired by the A9S's hasTargetChange method, source

# Conflicts:
#	package-lock.json
#	packages/text-annotator-react/package.json
#	packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant