fix(editor): should auto close dropdown menus on toolbar (#11522)

Closes: [BS-2524](https://linear.app/affine-design/issue/BS-2524/切换-block-后，刷新-toolbar-时，应该自动关闭已经打开的-dropdown)

blocksuite/affine/components/src/toolbar/menu-button.ts

@@ -46,6 +46,12 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
             composed: true,
           })
         );
+
+        if (opened) {
+          this.dataset.open = 'true';
+        } else {
+          delete this.dataset.open;
+        }
       },
       mainAxis: 0,
       offsetHeight: 6 * 4,

blocksuite/affine/widgets/toolbar/src/toolbar.ts

@@ -3,6 +3,7 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import { TableSelection } from '@blocksuite/affine-block-table';
 import {
   darkToolbarStyles,
+  type EditorMenuButton,
   EditorToolbar,
   lightToolbarStyles,
 } from '@blocksuite/affine-components/toolbar';
@@ -618,7 +619,7 @@ export class AffineToolbarWidget extends WidgetComponent {
       })
     );
 
-    // Update layout when placement changing to `inner`
+    // Updates layout when placement changing to `inner`
     disposables.add(
       effect(() => {
         toolbar.dataset.placement = placement$.value;
@@ -632,6 +633,10 @@ export class AffineToolbarWidget extends WidgetComponent {
         // Hides toolbar
         if (Flag.None === value || flags.check(Flag.Hiding, value)) {
           if (toolbar.dataset.open) delete toolbar.dataset.open;
+          // Closes dropdown menus
+          toolbar
+            .querySelector<EditorMenuButton>('editor-menu-button[data-open]')
+            ?.hide();
           return;
         }
 

blocksuite/affine/widgets/toolbar/src/utils.ts

@@ -1,4 +1,5 @@
 import {
+  type EditorMenuButton,
   type EditorToolbar,
   renderToolbarSeparator,
 } from '@blocksuite/affine-components/toolbar';
@@ -129,6 +130,10 @@ export function autoUpdatePosition(
       if (toolbar.dataset.open) {
         if (middlewareData.hide.referenceHidden) {
           delete toolbar.dataset.open;
+          // Closes dropdown menus
+          toolbar
+            .querySelector<EditorMenuButton>('editor-menu-button[data-open]')
+            ?.hide();
         }
       } else {
         toolbar.dataset.open = 'true';

tests/affine-local/e2e/blocksuite/toolbar.spec.ts

@@ -319,3 +319,37 @@ test('should focus on input of popover on toolbar', async ({ page }) => {
   const cornersValue = await cornersInput.inputValue();
   expect(cornersValue).toBe('36');
 });
+
+test('Dropdown menus should be closed automatically when toolbar is displayed', async ({
+  page,
+}) => {
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('/frame');
+  await page.keyboard.press('Enter');
+
+  const toolbar = locateToolbar(page);
+
+  const surfaceRef = page.locator('affine-surface-ref');
+  await surfaceRef.hover();
+
+  await expect(toolbar).toBeVisible();
+
+  const moreMenuContainer = toolbar.getByLabel('More menu');
+  const moreMenuButton = moreMenuContainer.getByLabel('More');
+  const moreMenu = moreMenuContainer.getByRole('menu');
+
+  await expect(moreMenu).toBeHidden();
+
+  await moreMenuButton.click();
+
+  await expect(moreMenu).toBeVisible();
+
+  await page.mouse.move(0, 0);
+
+  await expect(toolbar).toBeHidden();
+
+  await surfaceRef.hover();
+
+  await expect(toolbar).toBeVisible();
+  await expect(moreMenu).toBeHidden();
+});