From 8a13eca27113d8b2ed7a7af7916cade62616557a Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Mon, 7 Apr 2025 03:04:34 +0000
Subject: [PATCH] fix(editor): should focus on input of popover on toolbar
 (#11485)

Related to: https://github.com/toeverything/AFFiNE/pull/11429
---
 .../widgets/widget-toolbar/src/toolbar.ts     |  3 ++
 .../e2e/blocksuite/toolbar.spec.ts            | 46 +++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts
index dd8f0ba34..145b25044 100644
--- a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts
+++ b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts
@@ -37,6 +37,7 @@ import {
   type GfxModel,
   GfxPrimitiveElementModel,
 } from '@blocksuite/std/gfx';
+import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
 import type { ReferenceElement, SideObject } from '@floating-ui/dom';
 import { batch, effect, signal } from '@preact/signals-core';
 import { css, unsafeCSS } from 'lit';
@@ -247,6 +248,8 @@ export class AffineToolbarWidget extends WidgetComponent {
   override connectedCallback() {
     super.connectedCallback();
 
+    this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+
     const {
       sideOptions$,
       referenceElement$,
diff --git a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
index 282490fc8..7d3a4642e 100644
--- a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
@@ -273,3 +273,49 @@ test('should show toolbar when inline link is preceded by image or surface-ref',
   await expect(toolbar).toBeVisible();
   await expect(toolbar).not.toHaveAttribute('data-placement', 'inner');
 });
+
+test('should focus on input of popover on toolbar', async ({ page }) => {
+  await clickEdgelessModeButton(page);
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeHidden();
+
+  const note = page.locator('affine-edgeless-note').first();
+
+  await note.click();
+
+  await expect(toolbar).toBeVisible();
+
+  const scaleMenu = toolbar.locator('.scale-menu');
+  const scaleInput = scaleMenu.locator('input');
+  const scaleButton = scaleMenu.getByLabel('Scale');
+
+  await expect(scaleInput).toBeHidden();
+  await scaleButton.click();
+
+  await scaleInput.click();
+  await expect(scaleInput).toBeFocused();
+
+  await scaleInput.fill('150');
+  await expect(scaleInput).toBeFocused();
+
+  const scaleValue = await scaleInput.inputValue();
+  expect(scaleValue).toBe('150');
+
+  const cornersMenu = toolbar.locator('.corners-menu');
+  const cornersInput = cornersMenu.locator('input');
+  const cornersButton = cornersMenu.getByLabel('Corners');
+
+  await expect(cornersInput).toBeHidden();
+  await cornersButton.click();
+
+  await cornersInput.click();
+  await expect(cornersInput).toBeFocused();
+
+  await cornersInput.fill('36');
+  await expect(cornersInput).toBeFocused();
+
+  const cornersValue = await cornersInput.inputValue();
+  expect(cornersValue).toBe('36');
+});