Bug Fix: Shift+down selects an extra subsequent element for Table selection

packages/lexical-playground/__tests__/e2e/Selection.spec.mjs

@@ -1011,8 +1011,8 @@ test.describe.parallel('Selection', () => {
     await assertSelection(page, {
       anchorOffset: 0,
       anchorPath: [0],
-      focusOffset: 0,
-      focusPath: [2],
+      focusOffset: 1,
+      focusPath: [1, 2, 1],
     });
   });
 
@@ -1036,8 +1036,8 @@ test.describe.parallel('Selection', () => {
     await assertSelection(page, {
       anchorOffset: 0,
       anchorPath: [2],
-      focusOffset: 0,
-      focusPath: [0],
+      focusOffset: 1,
+      focusPath: [1, 1, 0],
     });
   });
 
@@ -1147,4 +1147,55 @@ test.describe.parallel('Selection', () => {
       focus: {x: 1, y: 1},
     });
   });
+
+  test('shift+arrowdown into a table does not select element after', async ({
+    page,
+    isPlainText,
+    isCollab,
+    legacyEvents,
+    browserName,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await insertTable(page, 2, 2);
+
+    await moveToEditorEnd(page);
+    await page.keyboard.type('def');
+
+    await moveToEditorBeginning(page);
+    await page.keyboard.down('Shift');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.up('Shift');
+    await assertSelection(page, {
+      anchorOffset: 0,
+      anchorPath: [0],
+      focusOffset: 1,
+      focusPath: [1, 2, 1],
+    });
+  });
+
+  test('shift+arrowup into a table does not select element before', async ({
+    page,
+    isPlainText,
+    isCollab,
+    legacyEvents,
+    browserName,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await insertTable(page, 2, 2);
+    await moveToEditorBeginning(page);
+    await page.keyboard.type('abc');
+
+    await moveToEditorEnd(page);
+    await page.keyboard.down('Shift');
+    await page.keyboard.press('ArrowUp');
+    await page.keyboard.up('Shift');
+    await assertSelection(page, {
+      anchorOffset: 0,
+      anchorPath: [2],
+      focusOffset: 1,
+      focusPath: [1, 1, 0],
+    });
+  });
 });

packages/lexical-table/src/LexicalTableSelectionHelpers.ts

@@ -1401,8 +1401,64 @@ function $handleArrowKey(
         (direction === 'up' || direction === 'down')
       ) {
         const focusNode = selection.focus.getNode();
-        if ($isRootOrShadowRoot(focusNode)) {
-          const selectedNode = selection.getNodes()[0];
+        const isTableUnselect =
+          !selection.isCollapsed() &&
+          ((direction === 'up' && !selection.isBackward()) ||
+            (direction === 'down' && selection.isBackward()));
+        if (isTableUnselect) {
+          let focusParentNode = $findMatchingParent(focusNode, (n) =>
+            $isTableNode(n),
+          );
+          if ($isTableCellNode(focusParentNode)) {
+            focusParentNode = $findMatchingParent(
+              focusParentNode,
+              $isTableNode,
+            );
+          }
+          if (focusParentNode !== tableNode) {
+            return false;
+          }
+          if (!focusParentNode) {
+            return false;
+          }
+          const sibling =
+            direction === 'down'
+              ? focusParentNode.getNextSibling()
+              : focusParentNode.getPreviousSibling();
+          if (!sibling) {
+            return false;
+          }
+          let newOffset = 0;
+          if (direction === 'up') {
+            if ($isElementNode(sibling)) {
+              newOffset = sibling.getChildrenSize();
+            }
+          }
+          let newFocusNode = sibling;
+          if (direction === 'up') {
+            if ($isElementNode(sibling)) {
+              const lastCell = sibling.getLastChild();
+              newFocusNode = lastCell ? lastCell : sibling;
+              newOffset = $isTextNode(newFocusNode)
+                ? newFocusNode.getTextContentSize()
+                : 0;
+            }
+          }
+          const newSelection = selection.clone();
+
+          newSelection.focus.set(
+            newFocusNode.getKey(),
+            newOffset,
+            $isTextNode(newFocusNode) ? 'text' : 'element',
+          );
+          $setSelection(newSelection);
+          stopEvent(event);
+          return true;
+        } else if ($isRootOrShadowRoot(focusNode)) {
+          const selectedNode =
+            direction === 'up'
+              ? selection.getNodes()[selection.getNodes().length - 1]
+              : selection.getNodes()[0];
           if (selectedNode) {
             const tableCellNode = $findMatchingParent(
               selectedNode,
@@ -1441,10 +1497,16 @@ function $handleArrowKey(
           }
           return false;
         } else {
-          const focusParentNode = $findMatchingParent(
+          let focusParentNode = $findMatchingParent(
             focusNode,
             (n) => $isElementNode(n) && !n.isInline(),
           );
+          if ($isTableCellNode(focusParentNode)) {
+            focusParentNode = $findMatchingParent(
+              focusParentNode,
+              $isTableNode,
+            );
+          }
           if (!focusParentNode) {
             return false;
           }
@@ -1469,6 +1531,7 @@ function $handleArrowKey(
               direction === 'up' ? 0 : lastCellNode.getChildrenSize(),
               'element',
             );
+            stopEvent(event);
             $setSelection(newSelection);
             return true;
           }