From 4cf374462fe729b0955173af10f1cf1f7c9b0e98 Mon Sep 17 00:00:00 2001
From: weareoutman <wangshenwei@qq.com>
Date: Fri, 6 Sep 2024 17:24:12 +0800
Subject: [PATCH] fix(page-arch-node): ignore enter behavior during IME
 composition

---
 .../src/page-arch-node/index.spec.tsx          | 18 ++++++++++++++++++
 .../src/page-arch-node/index.tsx               |  9 ++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/bricks/visual-builder/src/page-arch-node/index.spec.tsx b/bricks/visual-builder/src/page-arch-node/index.spec.tsx
index 7dbaf892c..16730682e 100644
--- a/bricks/visual-builder/src/page-arch-node/index.spec.tsx
+++ b/bricks/visual-builder/src/page-arch-node/index.spec.tsx
@@ -120,6 +120,24 @@ describe("visual-builder.page-arch-node", () => {
     });
     expect(onLabelChange).toBeCalledTimes(0);
 
+    // Composition blocks enter behavior
+    act(() => {
+      fireEvent.compositionStart(
+        element.shadowRoot?.querySelector(".label-input")
+      );
+    });
+    act(() => {
+      fireEvent.keyDown(element.shadowRoot?.querySelector(".label-input"), {
+        key: "Enter",
+      });
+    });
+    expect(onLabelChange).toBeCalledTimes(0);
+    act(() => {
+      fireEvent.compositionEnd(
+        element.shadowRoot?.querySelector(".label-input")
+      );
+    });
+
     act(() => {
       fireEvent.keyDown(element.shadowRoot?.querySelector(".label-input"), {
         key: "Enter",
diff --git a/bricks/visual-builder/src/page-arch-node/index.tsx b/bricks/visual-builder/src/page-arch-node/index.tsx
index 73241c25f..948cb430d 100644
--- a/bricks/visual-builder/src/page-arch-node/index.tsx
+++ b/bricks/visual-builder/src/page-arch-node/index.tsx
@@ -198,6 +198,7 @@ export function PageArchNodeComponent({
   const editingLabelInitialized = useRef(false);
   const [shouldEmitLabelChange, setShouldEmitLabelChange] = useState(false);
   const labelInputRef = useRef<HTMLInputElement>(null);
+  const compositionRef = useRef(false);
 
   useEffect(() => {
     setCurrentLabel(label);
@@ -247,7 +248,7 @@ export function PageArchNodeComponent({
       event.key ||
       /* istanbul ignore next: compatibility */ event.keyCode ||
       /* istanbul ignore next: compatibility */ event.which;
-    if (key === "Enter" || key === 13) {
+    if (!compositionRef.current && (key === "Enter" || key === 13)) {
       labelInputRef.current?.blur();
     }
   }, []);
@@ -309,6 +310,12 @@ export function PageArchNodeComponent({
           ref={labelInputRef}
           onChange={handleInputChange}
           onKeyDown={handleInputKeydown}
+          onCompositionStart={() => {
+            compositionRef.current = true;
+          }}
+          onCompositionEnd={() => {
+            compositionRef.current = false;
+          }}
           onBlur={handleInputBlur}
           onDoubleClick={stopPropagation}
           onContextMenu={stopPropagation}