From 8ac687628c569b0358a8f04b61126e6d880251c1 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Thu, 13 Mar 2025 06:14:35 +0000
Subject: [PATCH] chore(editor): at menu stays open when left right arrow keys
 are pressed (#10806)

Close [BS-2644](https://linear.app/affine-design/issue/BS-2644/menu-support)
---
 .../widgets/linked-doc/linked-doc-popover.ts  |  8 ++++++
 .../tests-legacy/e2e/linked-page.spec.ts      |  9 ++----
 .../e2e/blocksuite/at-menu.spec.ts            | 28 +++++++++++++++++++
 3 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 tests/affine-local/e2e/blocksuite/at-menu.spec.ts

diff --git a/blocksuite/affine/blocks/block-root/src/widgets/linked-doc/linked-doc-popover.ts b/blocksuite/affine/blocks/block-root/src/widgets/linked-doc/linked-doc-popover.ts
index d8a6945316..038c6c7ef2 100644
--- a/blocksuite/affine/blocks/block-root/src/widgets/linked-doc/linked-doc-popover.ts
+++ b/blocksuite/affine/blocks/block-root/src/widgets/linked-doc/linked-doc-popover.ts
@@ -179,6 +179,14 @@ export class LinkedDocPopover extends SignalWatcher(
     createKeydownObserver({
       target: eventSource,
       signal: keydownObserverAbortController.signal,
+      interceptor: (event, next) => {
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        next();
+      },
       onInput: isComposition => {
         if (isComposition) {
           this._updateLinkedDocGroup().catch(console.error);
diff --git a/blocksuite/tests-legacy/e2e/linked-page.spec.ts b/blocksuite/tests-legacy/e2e/linked-page.spec.ts
index 0942246b93..7747ccf959 100644
--- a/blocksuite/tests-legacy/e2e/linked-page.spec.ts
+++ b/blocksuite/tests-legacy/e2e/linked-page.spec.ts
@@ -12,9 +12,9 @@ import {
   cutByKeyboard,
   pasteByKeyboard,
   pressArrowLeft,
-  pressArrowRight,
   pressBackspace,
   pressEnter,
+  pressEscape,
   selectAllByKeyboard,
   SHORT_KEY,
   type,
@@ -107,7 +107,7 @@ test.describe('reference node', () => {
     );
     const { linkedDocPopover } = getLinkedDocPopover(page);
     await expect(linkedDocPopover).toBeVisible();
-    await pressArrowRight(page);
+    await pressEscape(page);
     await expect(linkedDocPopover).toBeHidden();
     await type(page, '@');
     await expect(linkedDocPopover).toBeVisible();
@@ -382,11 +382,6 @@ test.describe('linked page popover', () => {
     await page.keyboard.press('Escape');
     await expect(linkedDocPopover).toBeHidden();
 
-    await type(page, '@');
-    await expect(linkedDocPopover).toBeVisible();
-    await page.keyboard.press('ArrowRight');
-    await expect(linkedDocPopover).toBeHidden();
-
     await type(page, '@');
     await expect(linkedDocPopover).toBeVisible();
     await copyByKeyboard(page);
diff --git a/tests/affine-local/e2e/blocksuite/at-menu.spec.ts b/tests/affine-local/e2e/blocksuite/at-menu.spec.ts
new file mode 100644
index 0000000000..c7a47e8b45
--- /dev/null
+++ b/tests/affine-local/e2e/blocksuite/at-menu.spec.ts
@@ -0,0 +1,28 @@
+import { test } from '@affine-test/kit/playwright';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  type,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEditorLoad(page);
+});
+
+test('at menu should not be close when press arrow key', async ({ page }) => {
+  await page.keyboard.press('Enter');
+  await type(page, '@');
+
+  const atMenu = page.locator('.linked-doc-popover');
+  await expect(atMenu).toBeVisible();
+
+  await page.keyboard.press('ArrowRight');
+  await expect(atMenu).toBeVisible();
+
+  await page.keyboard.press('ArrowLeft');
+  await expect(atMenu).toBeVisible();
+});