fix(editor): database block columns popover closes unexpectedly (#11352)

fix: BS-2906

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;

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()
+  isFocus$ = signal(false);
-  accessor isFocus = false;
 
   @property({ attribute: false })
   accessor view!: SingleView;

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()) {

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?.();
+    requestAnimationFrame(() => {
-    this.closePopup = undefined;
+      this.closePopup?.();
+      this.closePopup = undefined;
+    });
   }
 
   override render() {

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

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()}
     >