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