From 09c7a597be001b6a6e03f60ee47fbc44ab6c154e Mon Sep 17 00:00:00 2001
From: donteatfriedrice <chs@bupt.cn>
Date: Mon, 6 Jan 2025 04:09:01 +0000
Subject: [PATCH] fix(core): should focus when clicking sidebar button (#9339)

---
 .../app-sidebar/views/menu-item/index.tsx     |  1 +
 .../views/quick-search-input/index.tsx        |  1 +
 tests/affine-local/e2e/quick-search.spec.ts   | 30 +++++++++++++++++++
 tests/kit/utils/keyboard.ts                   |  6 ++++
 4 files changed, 38 insertions(+)

diff --git a/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx b/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx
index ee46c2a909..264d5c3844 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx
@@ -51,6 +51,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
         data-active={active}
         data-disabled={disabled}
         data-collapsible={collapsible}
+        tabIndex={0}
       >
         {icon && (
           <div className={styles.iconsContainer} data-collapsible={collapsible}>
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx
index 0b4283d345..0c3a742210 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.tsx
@@ -19,6 +19,7 @@ export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
       {...props}
       className={clsx([props.className, styles.root])}
       onClick={onClick}
+      tabIndex={0}
     >
       <SearchIcon className={styles.icon} />
       <span className={styles.quickSearchBarEllipsisStyle}>
diff --git a/tests/affine-local/e2e/quick-search.spec.ts b/tests/affine-local/e2e/quick-search.spec.ts
index 64023e4b5f..23ba53f7a0 100644
--- a/tests/affine-local/e2e/quick-search.spec.ts
+++ b/tests/affine-local/e2e/quick-search.spec.ts
@@ -1,6 +1,9 @@
 import { test } from '@affine-test/kit/playwright';
 import { clickEdgelessModeButton } from '@affine-test/kit/utils/editor';
 import {
+  copyByKeyboard,
+  pasteByKeyboard,
+  selectAllByKeyboard,
   withCtrlOrMeta,
   writeTextToClipboard,
 } from '@affine-test/kit/utils/keyboard';
@@ -587,3 +590,30 @@ test('can use slash menu to insert an external link', async ({ page }) => {
     link
   );
 });
+
+test('Paste content with keyboard', async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page, 'Test');
+
+  // goto main content
+  await page.keyboard.press('Enter');
+
+  // input hello world to editor
+  await page.keyboard.type('hello world', {
+    delay: 50,
+  });
+
+  await selectAllByKeyboard(page);
+  await copyByKeyboard(page);
+
+  const quickSearchButton = page.locator(
+    '[data-testid=slider-bar-quick-search-button]'
+  );
+  await quickSearchButton.click();
+  const quickSearch = page.locator('[data-testid=cmdk-quick-search]');
+  await expect(quickSearch).toBeVisible();
+
+  await pasteByKeyboard(page);
+  await expect(page.locator('[cmdk-input]')).toHaveValue('hello world');
+});
diff --git a/tests/kit/utils/keyboard.ts b/tests/kit/utils/keyboard.ts
index a51dd81664..149fb6e248 100644
--- a/tests/kit/utils/keyboard.ts
+++ b/tests/kit/utils/keyboard.ts
@@ -64,6 +64,12 @@ export async function pasteByKeyboard(page: Page) {
   await keyUpCtrlOrMeta(page);
 }
 
+export async function selectAllByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('a', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
 export async function writeTextToClipboard(page: Page, text: string) {
   // paste the url
   await page.evaluate(