[lexical-table] Bug Fix: Fix unintended touch table cell selection wh…

…en scrolling (#7309)
facebook · Mar 8, 2025 · 993184c · 993184c
1 parent 9fb1b3c
commit 993184c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/packages/lexical-table/src/LexicalTableObserver.ts b/packages/lexical-table/src/LexicalTableObserver.ts
@@ -103,6 +103,7 @@ export class TableObserver {
   tableSelection: TableSelection | null;
   hasHijackedSelectionStyles: boolean;
   isSelecting: boolean;
+  pointerType: string | null;
   shouldCheckSelection: boolean;
   abortController: AbortController;
   listenerOptions: {signal: AbortSignal};
@@ -129,6 +130,7 @@ export class TableObserver {
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
     this.isSelecting = false;
+    this.pointerType = null;
     this.shouldCheckSelection = false;
     this.abortController = new AbortController();
     this.listenerOptions = {signal: this.abortController.signal};

diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -247,6 +247,7 @@ export function applyTableHandlers(
   };
 
   const onPointerDown = (event: PointerEvent) => {
+    tableObserver.pointerType = event.pointerType;
     if (event.button !== 0 || !isDOMNode(event.target) || !editorWindow) {
       return;
     }
@@ -258,11 +259,9 @@ export function applyTableHandlers(
         // We can't trust Firefox to do the right thing with the selection and
         // we don't have a proper state machine to do this "correctly" but
         // if we go ahead and make the table selection now it will work
-        // Handle case when tapping on a cell with touch device
         if (
-          ((IS_FIREFOX && event.shiftKey) ||
-            (event.pointerType === 'touch' &&
-              !$isTableSelection(prevSelection))) &&
+          IS_FIREFOX &&
+          event.shiftKey &&
           $isSelectionInTable(prevSelection, tableNode) &&
           ($isRangeSelection(prevSelection) || $isTableSelection(prevSelection))
         ) {
@@ -999,6 +998,36 @@ export function applyTableHandlers(
                 true,
               );
             }
+
+            // Handle case when the pointer type is touch and the current and
+            // previous selection are collapsed, and the previous anchor and current
+            // focus cell nodes are different, then we convert it into table selection
+            if (
+              tableObserver.pointerType === 'touch' &&
+              selection.isCollapsed() &&
+              $isRangeSelection(prevSelection) &&
+              prevSelection.isCollapsed()
+            ) {
+              const prevAnchorCellNode = $findCellNode(
+                prevSelection.anchor.getNode(),
+              );
+              if (prevAnchorCellNode && !prevAnchorCellNode.is(focusCellNode)) {
+                tableObserver.$setAnchorCellForSelection(
+                  $getObserverCellFromCellNodeOrThrow(
+                    tableObserver,
+                    prevAnchorCellNode,
+                  ),
+                );
+                tableObserver.$setFocusCellForSelection(
+                  $getObserverCellFromCellNodeOrThrow(
+                    tableObserver,
+                    focusCellNode,
+                  ),
+                  true,
+                );
+                tableObserver.pointerType = null;
+              }
+            }
           }
         } else if (
           selection &&