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; }) => @@ -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` -
- ${renderUniLit(property.icon)} -
- `, - initialValue: property.name$.value, - placeholder: 'Property name', - onChange: text => { - property.nameSet(text); - }, - }); - } return menu.input({ prefix: html`
@@ -28,7 +13,7 @@ export const inputConfig = (property: Property) => { `, initialValue: property.name$.value, placeholder: 'Property name', - onComplete: text => { + onBlur: text => { property.nameSet(text); }, });