From 08327b14d6451786dbe9fba87ba45551a55cca7d Mon Sep 17 00:00:00 2001
From: zzj3720 <17165520+zzj3720@users.noreply.github.com>
Date: Tue, 1 Apr 2025 10:32:23 +0000
Subject: [PATCH] fix(editor): database block columns popover closes
 unexpectedly (#11352)

fix: BS-2906
---
 .../src/core/component/tags/multi-tag-select.ts   | 15 +++++++++++++--
 .../affine/data-view/src/core/detail/field.ts     |  7 +++----
 .../affine/data-view/src/core/detail/selection.ts |  4 ++--
 .../multi-select/cell-renderer.ts                 |  6 ++++--
 .../database-block/properties/file/view.tsx       | 10 ++++++++--
 .../member/multi-member-select/index.tsx          |  1 +
 6 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts b/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts
index 46cd3d125a..0aaa1e8d21 100644
--- a/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts
+++ b/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts
@@ -16,7 +16,7 @@ import {
 } from '@blocksuite/icons/lit';
 import { ShadowlessElement } from '@blocksuite/std';
 import { nanoid } from '@blocksuite/store';
-import { flip, offset, shift } from '@floating-ui/dom';
+import { autoPlacement, offset, shift } from '@floating-ui/dom';
 import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { nothing } from 'lit';
@@ -588,7 +588,18 @@ export const popTagSelect = (target: PopupTarget, ops: TagSelectOptions) => {
   };
   const remove = createPopup(target, component, {
     onClose: ops.onComplete,
-    middleware: [flip(), offset({ mainAxis: -28, crossAxis: 112 }), shift()],
+    middleware: [
+      autoPlacement({
+        allowedPlacements: [
+          'bottom-start',
+          'bottom-end',
+          'top-start',
+          'top-end',
+        ],
+      }),
+      offset({ mainAxis: -36 }),
+      shift(),
+    ],
     container: ops.container,
   });
   return remove;
diff --git a/blocksuite/affine/data-view/src/core/detail/field.ts b/blocksuite/affine/data-view/src/core/detail/field.ts
index 80aee71460..498aa97822 100644
--- a/blocksuite/affine/data-view/src/core/detail/field.ts
+++ b/blocksuite/affine/data-view/src/core/detail/field.ts
@@ -13,7 +13,7 @@ import {
 import { ShadowlessElement } from '@blocksuite/std';
 import { computed, signal } from '@preact/signals-core';
 import { css } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit/static-html.js';
 
@@ -249,7 +249,7 @@ export class RecordField extends SignalWatcher(
       'field-content': true,
       empty: !this.isEditing$.value && this.cell$.value.isEmpty$.value,
       'is-editing': this.isEditing$.value,
-      'is-focus': this.isFocus,
+      'is-focus': this.isFocus$.value,
     });
     return html`
       <div>
@@ -271,8 +271,7 @@ export class RecordField extends SignalWatcher(
 
   isEditing$ = signal(false);
 
-  @state()
-  accessor isFocus = false;
+  isFocus$ = signal(false);
 
   @property({ attribute: false })
   accessor view!: SingleView;
diff --git a/blocksuite/affine/data-view/src/core/detail/selection.ts b/blocksuite/affine/data-view/src/core/detail/selection.ts
index e16ca31e74..779e468397 100644
--- a/blocksuite/affine/data-view/src/core/detail/selection.ts
+++ b/blocksuite/affine/data-view/src/core/detail/selection.ts
@@ -57,7 +57,7 @@ export class DetailSelection {
       return;
     }
 
-    container.isFocus = false;
+    container.isFocus$.value = false;
     const cell = container.cell;
 
     if (selection.isEditing) {
@@ -80,7 +80,7 @@ export class DetailSelection {
     if (!container) {
       return;
     }
-    container.isFocus = true;
+    container.isFocus$.value = true;
     const cell = container.cell;
     if (selection.isEditing) {
       if (cell?.focusCell()) {
diff --git a/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts
index 2b930eeec5..d9d6a0b14d 100644
--- a/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts
+++ b/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts
@@ -59,8 +59,10 @@ export class MultiSelectCell extends BaseCellRenderer<
   }
 
   override beforeExitEditingMode() {
-    this.closePopup?.();
-    this.closePopup = undefined;
+    requestAnimationFrame(() => {
+      this.closePopup?.();
+      this.closePopup = undefined;
+    });
   }
 
   override render() {
diff --git a/packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx b/packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx
index 82c9dc3401..8f2d04ac91 100644
--- a/packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx
+++ b/packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx
@@ -352,7 +352,10 @@ const FileCellComponent: ForwardRefRenderFunction<
   const renderPopoverContent = () => {
     if (fileList.length === 0) {
       return (
-        <div className={styles.uploadPopoverContainer}>
+        <div
+          data-peek-view-wrapper="true"
+          className={styles.uploadPopoverContainer}
+        >
           <Button
             onClick={() => {
               openFileOrFiles({ multiple: true })
@@ -383,7 +386,10 @@ const FileCellComponent: ForwardRefRenderFunction<
       );
     }
     return (
-      <div className={styles.filePopoverContainer}>
+      <div
+        data-peek-view-wrapper="true"
+        className={styles.filePopoverContainer}
+      >
         <div className={styles.fileListContainer}>
           {fileList.map(file => (
             <FileListItem
diff --git a/packages/frontend/core/src/blocksuite/database-block/properties/member/multi-member-select/index.tsx b/packages/frontend/core/src/blocksuite/database-block/properties/member/multi-member-select/index.tsx
index 71e62a2eb3..d7a424bcd4 100644
--- a/packages/frontend/core/src/blocksuite/database-block/properties/member/multi-member-select/index.tsx
+++ b/packages/frontend/core/src/blocksuite/database-block/properties/member/multi-member-select/index.tsx
@@ -302,6 +302,7 @@ export const MultiMemberSelect: React.FC<MemberManagerOptions> = props => {
 
   return (
     <div
+      data-peek-view-wrapper="true"
       className={styles.multiMemberSelectContainer}
       onClick={() => inputRef.current?.focus()}
     >