fix(editor): should focus on input of popover on toolbar (#11485)

Related to: https://github.com/toeverything/AFFiNE/pull/11429

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$,

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');
+});