fix(database): move cursor in kanban card title by arrow keys (#8893)

toeverything · Dec 11, 2024 · 4366c6b · 4366c6b
1 parent 5a5afcd
commit 4366c6b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/packages/affine/data-view/src/view-presets/kanban/pc/controller/hotkeys.ts b/packages/affine/data-view/src/view-presets/kanban/pc/controller/hotkeys.ts
@@ -42,18 +42,16 @@ export class KanbanHotkeysController implements ReactiveController {
           context.get('keyboardState').raw.preventDefault();
           return true;
         },
-        ArrowLeft: context => {
+        ArrowLeft: () => {
           if (!this.hasSelection) return false;
 
           this.host.selectionController.focusNext('left');
-          context.get('keyboardState').raw.preventDefault();
           return true;
         },
-        ArrowRight: context => {
+        ArrowRight: () => {
           if (!this.hasSelection) return false;
 
           this.host.selectionController.focusNext('right');
-          context.get('keyboardState').raw.preventDefault();
           return true;
         },
         Backspace: () => {

diff --git a/tests/database/actions.ts b/tests/database/actions.ts
@@ -462,6 +462,22 @@ export async function focusKanbanCardHeader(page: Page, index = 0) {
   await cardHeader.click();
 }
 
+export async function clickKanbanCardHeader(page: Page, index = 0) {
+  const cardHeader = page.locator('data-view-header-area-text').nth(index);
+  await cardHeader.click();
+  await cardHeader.click();
+}
+
+export async function assertKanbanCardHeaderText(
+  page: Page,
+  text: string,
+  index = 0
+) {
+  const cardHeader = page.locator('data-view-header-area-text').nth(index);
+
+  await expect(cardHeader).toHaveText(text);
+}
+
 export async function assertKanbanCellSelected(
   page: Page,
   {

diff --git a/tests/database/selection.spec.ts b/tests/database/selection.spec.ts
@@ -27,9 +27,11 @@ import { test } from '../utils/playwright.js';
 import {
   assertCellsSelection,
   assertDatabaseTitleColumnText,
+  assertKanbanCardHeaderText,
   assertKanbanCardSelected,
   assertKanbanCellSelected,
   assertRowsSelection,
+  clickKanbanCardHeader,
   focusKanbanCardHeader,
   getDatabaseBodyCell,
   getKanbanCard,
@@ -538,4 +540,28 @@ test.describe('kanban view selection', () => {
       cardIndex: 0,
     });
   });
+
+  test("should support move cursor in card's title by arrow key(left&right)", async ({
+    page,
+  }) => {
+    await enterPlaygroundRoom(page);
+    await initKanbanViewState(page, {
+      rows: ['row1'],
+      columns: [
+        {
+          type: 'rich-text',
+          value: ['text'],
+        },
+      ],
+    });
+
+    await clickKanbanCardHeader(page);
+    await type(page, 'abc');
+    await pressArrowLeft(page, 2);
+    await pressArrowRight(page);
+    await pressBackspace(page);
+    await pressEscape(page);
+
+    await assertKanbanCardHeaderText(page, 'row1ac');
+  });
 });