fix(tables): tab causing indent in last table cell (BLO-1211) (#2831)

Author: matthewlipski

packages/core/src/blocks/Table/TableExtension.ts

@@ -73,14 +73,28 @@ export const TableExtension = Extension.create({
       },
       // Enables navigating cells using the tab key.
       Tab: () => {
-        return this.editor.commands.command(({ state, dispatch, view }) =>
-          goToNextCell(1)(state, dispatch, view),
-        );
+        return this.editor.commands.command(({ state, dispatch, view }) => {
+          if (!isInTable(state)) {
+            return false;
+          }
+
+          goToNextCell(1)(state, dispatch, view);
+
+          // Always return true to avoid accidental indents.
+          return true;
+        });
       },
       "Shift-Tab": () => {
-        return this.editor.commands.command(({ state, dispatch, view }) =>
-          goToNextCell(-1)(state, dispatch, view),
-        );
+        return this.editor.commands.command(({ state, dispatch, view }) => {
+          if (!isInTable(state)) {
+            return false;
+          }
+
+          // Always return true to avoid accidental un-indents.
+          goToNextCell(-1)(state, dispatch, view);
+
+          return true;
+        });
       },
     };
   },

tests/src/end-to-end/tables/tables.test.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../utils/editor.js";
 import { mouseSequence, moveMouseOverElement } from "../../utils/mouse.js";
 import { executeSlashCommand } from "../../utils/slashmenu.js";
+import { insertParagraph } from "../../utils/copypaste.js";
 
 beforeEach(async () => {
   await render(<App />);
@@ -40,6 +41,32 @@ describe("Check Table interactions", () => {
 
     await compareDocToSnapshot("tabCells");
   });
+  test("Tab in last cell should be a no-op", async () => {
+    await focusOnEditor();
+
+    await insertParagraph();
+    await executeSlashCommand("table");
+
+    for (let i = 0; i < 6; i++) {
+      await userEvent.keyboard("{Tab}");
+    }
+
+    // Only top level block group should exist.
+    expect(document.querySelectorAll(".bn-block-group").length).toBe(1);
+  });
+  test("Shift+Tab in first should be a no-op", async () => {
+    await focusOnEditor();
+
+    await insertParagraph();
+    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Tab}");
+    await executeSlashCommand("table");
+
+    await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+
+    // Block group containing table should exist as well as top level group.
+    expect(document.querySelectorAll(".bn-block-group").length).toBe(2);
+  });
   test("Arrow keys should move cells", async () => {
     await focusOnEditor();
     await executeSlashCommand("table");