From 119610122600a0363ceacd48575e652cbf3eb52e Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Fri, 5 Dec 2025 14:37:15 +0800
Subject: [PATCH] fix(editor): use onBlur for input handling in property menu
 (#14049)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eliminate mobile-specific input handling from the property menu to
streamline functionality across devices.


Before


https://github.com/user-attachments/assets/563857c9-6d2f-4c38-9359-7e3e74dfb531


After


https://github.com/user-attachments/assets/0126b966-cdc2-40b7-b416-3a0e8be4aedf


Maybe related to
https://github.com/toeverything/blocksuite/pull/7524/files#diff-25406bbadb23338f3120c8d0c5e1e8485173750a57f1ba3d7a51be1c9f548696
https://github.com/toeverything/blocksuite/pull/8787/files#diff-36fb3de4c5129393febe0286eb10e9ebb791296500dc4229c9d609b9ed5e138c

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved input field responsiveness by enhancing event handling for
blur interactions.

* **Improvements**
* Unified input component behavior across all platforms for more
consistent user experience.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../affine/components/src/context-menu/input.ts |  8 ++++++++
 .../data-view/src/core/common/property-menu.ts  | 17 +----------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/blocksuite/affine/components/src/context-menu/input.ts b/blocksuite/affine/components/src/context-menu/input.ts
index ff5d94336..b2ae72e15 100644
--- a/blocksuite/affine/components/src/context-menu/input.ts
+++ b/blocksuite/affine/components/src/context-menu/input.ts
@@ -17,6 +17,7 @@ export type MenuInputData = {
   class?: string;
   onComplete?: (value: string) => void;
   onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
   disableAutoFocus?: boolean;
 };
 
@@ -49,6 +50,10 @@ export class MenuInput extends MenuFocusable {
     this.data.onChange?.(this.inputRef.value);
   };
 
+  private readonly onBlur = () => {
+    this.data.onBlur?.(this.inputRef.value);
+  };
+
   private readonly onInput = (e: InputEvent) => {
     e.stopPropagation();
     if (e.isComposing) return;
@@ -109,6 +114,7 @@ export class MenuInput extends MenuFocusable {
       @focus="${() => {
         this.menu.setFocusOnly(this);
       }}"
+      @blur="${this.onBlur}"
       @input="${this.onInput}"
       placeholder="${this.data.placeholder ?? ''}"
       @keypress="${this.stopPropagation}"
@@ -215,6 +221,7 @@ export const menuInputItems = {
       prefix?: TemplateResult;
       onComplete?: (value: string) => void;
       onChange?: (value: string) => void;
+      onBlur?: (value: string) => void;
       class?: string;
       style?: Readonly<StyleInfo>;
     }) =>
@@ -228,6 +235,7 @@ export const menuInputItems = {
         class: config.class,
         onComplete: config.onComplete,
         onChange: config.onChange,
+        onBlur: config.onBlur,
       };
       const style = styleMap({
         display: 'flex',
diff --git a/blocksuite/affine/data-view/src/core/common/property-menu.ts b/blocksuite/affine/data-view/src/core/common/property-menu.ts
index 16ba75048..8c1a65ff5 100644
--- a/blocksuite/affine/data-view/src/core/common/property-menu.ts
+++ b/blocksuite/affine/data-view/src/core/common/property-menu.ts
@@ -1,25 +1,10 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
-import { IS_MOBILE } from '@blocksuite/global/env';
 import { html } from 'lit/static-html.js';
 
 import { renderUniLit } from '../utils/uni-component/index.js';
 import type { Property } from '../view-manager/property.js';
 
 export const inputConfig = (property: Property) => {
-  if (IS_MOBILE) {
-    return menu.input({
-      prefix: html`
-        <div class="affine-database-column-type-menu-icon">
-          ${renderUniLit(property.icon)}
-        </div>
-      `,
-      initialValue: property.name$.value,
-      placeholder: 'Property name',
-      onChange: text => {
-        property.nameSet(text);
-      },
-    });
-  }
   return menu.input({
     prefix: html`
       <div class="affine-database-column-type-menu-icon">
@@ -28,7 +13,7 @@ export const inputConfig = (property: Property) => {
     `,
     initialValue: property.name$.value,
     placeholder: 'Property name',
-    onComplete: text => {
+    onBlur: text => {
       property.nameSet(text);
     },
   });