From f860f77a2486df47cbd8d2551f19e88f72edab96 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Sun, 13 Apr 2025 02:39:05 +0000
Subject: [PATCH] fix(editor): can not query in mobile at menu (#11649)

This PR addresses an issue where queries cannot be performed in the mobile menu, particularly on Android devices. The root cause was that the `event.key` of keypress returns 'Unidentified' on Android, which prevented proper query handling.

Changes made:
- Replaced the keydown event observer with a beforeinput event listener
- Removed unnecessary keyboard event handling code that was causing issues
---
 .../linked-doc/src/mobile-linked-doc-menu.ts  | 51 +++----------------
 1 file changed, 8 insertions(+), 43 deletions(-)

diff --git a/blocksuite/affine/widgets/linked-doc/src/mobile-linked-doc-menu.ts b/blocksuite/affine/widgets/linked-doc/src/mobile-linked-doc-menu.ts
index 074cab925f..813e0bfc01 100644
--- a/blocksuite/affine/widgets/linked-doc/src/mobile-linked-doc-menu.ts
+++ b/blocksuite/affine/widgets/linked-doc/src/mobile-linked-doc-menu.ts
@@ -3,10 +3,7 @@ import {
   getTextContentFromInlineRange,
 } from '@blocksuite/affine-rich-text';
 import { VirtualKeyboardProvider } from '@blocksuite/affine-shared/services';
-import {
-  createKeydownObserver,
-  getViewportElement,
-} from '@blocksuite/affine-shared/utils';
+import { getViewportElement } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
 import { PropTypes, requiredProperties } from '@blocksuite/std';
@@ -36,8 +33,6 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
 
   private readonly _expand = new Set<string>();
 
-  private _firstActionItem: LinkedMenuItem | null = null;
-
   private readonly _linkedDocGroup$ = signal<LinkedMenuGroup[]>([]);
 
   private readonly _renderGroup = (group: LinkedMenuGroup) => {
@@ -187,42 +182,14 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
       const keydownObserverAbortController = new AbortController();
       this._disposables.add(() => keydownObserverAbortController.abort());
 
-      createKeydownObserver({
-        target: eventSource,
-        signal: keydownObserverAbortController.signal,
-        onInput: isComposition => {
-          if (isComposition) {
-            this._updateLinkedDocGroup().catch(console.error);
-          } else {
-            const subscription = inlineEditor.slots.renderComplete.subscribe(
-              () => {
-                subscription.unsubscribe();
-                this._updateLinkedDocGroup().catch(console.error);
-              }
-            );
-          }
-        },
-        onDelete: () => {
-          const subscription = inlineEditor.slots.renderComplete.subscribe(
-            () => {
-              subscription.unsubscribe();
-              const curRange = inlineEditor.getInlineRange();
-
-              if (!this.context.startRange || !curRange) return;
-
-              if (curRange.index < this.context.startRange.index) {
-                this.context.close();
-              }
-              this._updateLinkedDocGroup().catch(console.error);
-            }
-          );
-        },
-        onConfirm: () => {
-          this._firstActionItem?.action()?.catch(console.error);
-        },
-        onAbort: () => {
+      // we need use beforeinput because the event.key of keypress event usually is `Unidentified` in Android
+      this.disposables.addFromEvent(eventSource, 'beforeinput', () => {
+        const curRange = inlineEditor.getInlineRange();
+        if (curRange && curRange.index < this.context.startRange.index) {
           this.context.close();
-        },
+          return;
+        }
+        this._updateLinkedDocGroup().catch(console.error);
       });
     }
   }
@@ -237,8 +204,6 @@ export class AffineMobileLinkedDocMenu extends SignalWatcher(
       return nothing;
     }
 
-    this._firstActionItem = resolveSignal(groups[0].items)[0];
-
     this.style.bottom = `${this.keyboard.height$.value}px`;
 
     return html`