From 4366c6b8e3d94c90a69c41d0f4526f9fe5ae7b82 Mon Sep 17 00:00:00 2001
From: Oleg <67059482+OlegDev1@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:00:20 +0100
Subject: [PATCH] fix(database): move cursor in kanban card title by arrow keys
 (#8893)

---
 .../kanban/pc/controller/hotkeys.ts           |  6 ++---
 tests/database/actions.ts                     | 16 ++++++++++++
 tests/database/selection.spec.ts              | 26 +++++++++++++++++++
 3 files changed, 44 insertions(+), 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
index 75bc90f70655..1c74cf59fe2c 100644
--- 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
index 963308061a37..79c250f7acb2 100644
--- 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
index 8511ca872e9d..e0911a1b7c68 100644
--- 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');
+  });
 });