⚠️ Fixed accessing an obsolete isCollapsed value on pointerup handling ⚠️

packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx

@@ -154,4 +154,4 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
     </FloatingPortal>
   ) : null;
 
-}
+}

packages/text-annotator/package.json

@@ -41,7 +41,8 @@
     "colord": "^2.9.3",
     "dequal": "^2.0.3",
     "hotkeys-js": "^3.13.7",
+    "poll": "^3.2.2",
     "rbush": "^4.0.1",
     "uuid": "^10.0.0"
   }
-}
+}

packages/text-annotator/src/SelectionHandler.ts

@@ -2,6 +2,7 @@ import { Origin } from '@annotorious/core';
 import type { Filter, Selection, User } from '@annotorious/core';
 import { v4 as uuidv4 } from 'uuid';
 import hotkeys from 'hotkeys-js';
+import { poll } from 'poll';
 import type { TextAnnotatorState } from './state';
 import type { TextAnnotation, TextAnnotationTarget } from './model';
 import {
@@ -188,7 +189,7 @@ export const SelectionHandler = (
     }
   }
 
-  const onPointerUp = (evt: PointerEvent) => {
+  const onPointerUp = async (evt: PointerEvent) => {
     if (isContextMenuOpen) return;
 
     const annotatable = !(evt.target as Node).parentElement?.closest(NOT_ANNOTATABLE_SELECTOR);
@@ -214,30 +215,48 @@ export const SelectionHandler = (
       }
     };
 
+
     const timeDifference = evt.timeStamp - lastDownEvent.timeStamp;
+    if (timeDifference < CLICK_TIMEOUT) {
+      await pollSelectionCollapsed();
 
-    /**
-     * We must check the `isCollapsed` within the 0-timeout
-     * to handle the annotation dismissal after a click properly.
-     *
-     * Otherwise, the `isCollapsed` will return an obsolete `false` value,
-     * click won't be processed, and the annotation will get falsely re-selected.
-     *
-     * @see https://github.com/recogito/text-annotator-js/issues/136
-     */
-    setTimeout(() => {
       const sel = document.getSelection();
-
-      // Just a click, not a selection
-      if (sel?.isCollapsed && timeDifference < CLICK_TIMEOUT) {
+      if (sel?.isCollapsed) {
         currentTarget = undefined;
         clickSelect();
-      } else if (currentTarget && currentTarget.selector.length > 0) {
-        selection.clear();
-        upsertCurrentTarget();
-        selection.userSelect(currentTarget.annotation, clonePointerEvent(evt));
+        return;
       }
-    });
+    }
+
+    if (currentTarget && currentTarget.selector.length > 0) {
+      selection.clear();
+      upsertCurrentTarget();
+      selection.userSelect(currentTarget.annotation, clonePointerEvent(evt));
+    }
+  }
+
+  /**
+   * We must check the `isCollapsed` after an unspecified timeout
+   * to handle the annotation dismissal after a click properly.
+   *
+   * Otherwise, the `isCollapsed` will return an obsolete `false` value,
+   * click won't be processed, and the annotation will get falsely re-selected.
+   *
+   * @see https://github.com/recogito/text-annotator-js/issues/136#issue-2465915707
+   * @see https://github.com/recogito/text-annotator-js/issues/136#issuecomment-2413773804
+   */
+  const pollSelectionCollapsed = async () => {
+    const sel = document.getSelection();
+
+    let stopPolling = false;
+    let isCollapsed = sel?.isCollapsed;
+    const shouldStopPolling = () => isCollapsed || stopPolling;
+
+    const pollingDelayMs = 2;
+    const stopPollingInMs = 50;
+    setTimeout(() => stopPolling = true, stopPollingInMs);
+
+    return poll(() => isCollapsed = sel?.isCollapsed, pollingDelayMs, shouldStopPolling);
   }
 
   const onContextMenu = (evt: PointerEvent) => {