fix(VE-5361): update field event is not sent when input event does not occur in inline editable fields

src/visualBuilder/generators/generateOverlay.tsx

@@ -8,7 +8,6 @@ import EventListenerHandlerParams from "../listeners/types";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap";
 import { FieldDataType } from "../utils/types/index.types";
 import { getFieldType } from "../utils/getFieldType";
-import { CslpData } from "../../cslp/types/cslp.types";
 import { getMultilinePlaintext } from "../utils/getMultilinePlaintext";
 import { showAllHiddenHighlightedCommentIcons } from "./generateHighlightedComment";
 
@@ -119,7 +118,10 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
             }
         });
 
-        if (!noTrigger) {
+        if (
+            !noTrigger &&
+            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput
+        ) {
             sendFieldEvent({
                 visualBuilderContainer,
                 eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,
@@ -136,6 +138,8 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
             }
         }
         VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;
+        VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =
+            false;
         cleanIndividualFieldResidual({
             overlayWrapper: visualBuilderOverlayWrapper,
             visualBuilderContainer: visualBuilderContainer,

src/visualBuilder/index.ts

@@ -49,6 +49,7 @@ interface VisualBuilderGlobalStateImpl {
     previousHoveredTargetDOM: Element | null;
     previousEmptyBlockParents: Element[] | [];
     focusFieldValue: string | null;
+    focusFieldReceivedInput: boolean;
     audienceMode: boolean;
     locale: string;
     variant: string | null;
@@ -67,6 +68,7 @@ export class VisualBuilder {
             previousHoveredTargetDOM: null,
             previousEmptyBlockParents: [],
             focusFieldValue: null,
+            focusFieldReceivedInput: false,
             audienceMode: false,
             locale: Config.get().stackDetails.masterLocale || "en-us",
             variant: null,
@@ -186,9 +188,7 @@ export class VisualBuilder {
                     this.resizeObserver
                 );
                 const emptyBlockParents = Array.from(
-                    document.querySelectorAll(
-                        `.${VB_EmptyBlockParentClass}`
-                    )
+                    document.querySelectorAll(`.${VB_EmptyBlockParentClass}`)
                 );
 
                 const previousEmptyBlockParents = VisualBuilder

src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts

@@ -156,6 +156,8 @@ describe("hideFocusOverlay", () => {
         initUI({
             resizeObserver: mockResizeObserver,
         });
+        VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =
+            true;
         visualBuilderContainer = document.querySelector(
             ".visual-builder__container"
         ) as HTMLDivElement;

src/visualBuilder/utils/__test__/handleFieldMouseDown.test.ts

@@ -6,12 +6,22 @@ import * as generateOverlay from "../../generators/generateOverlay";
 import { VisualBuilderPostMessageEvents } from "../types/postMessage.types";
 import { FieldDataType } from "../types/index.types";
 import userEvent from "@testing-library/user-event";
-import { waitFor, screen } from "@testing-library/preact";
+import { waitFor } from "@testing-library/preact";
+import { VisualBuilder } from "../../index";
+
+vi.mock("../../index", async () => ({
+    VisualBuilder: {
+        VisualBuilderGlobalState: {
+            value: { focusFieldReceivedInput: false },
+        },
+    },
+}));
 
 vi.mock("lodash-es", async () => ({
     ...(await import("lodash-es")),
     throttle: vi.fn((fn) => fn),
-}))
+}));
+
 describe("handle numeric field key down", () => {
     let h1: HTMLHeadingElement;
     let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
@@ -117,7 +127,7 @@ describe("handle numeric field key down", () => {
     });
 
     test("should only accept characters like a number input", async () => {
-        h1.innerHTML = '';
+        h1.innerHTML = "";
         await userEvent.click(h1);
         await userEvent.keyboard("ab56c78e-h10");
 
@@ -180,7 +190,10 @@ describe("handle single line field key down", () => {
         h1 = document.createElement("h1");
         h1.innerHTML = "2.2";
         h1.setAttribute("contenteditable", "true");
-        h1.setAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY, FieldDataType.SINGLELINE);
+        h1.setAttribute(
+            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
+            FieldDataType.SINGLELINE
+        );
 
         h1.addEventListener("keydown", (e) => {
             spiedPreventDefault = vi.spyOn(e, "preventDefault");
@@ -209,7 +222,7 @@ describe("handle single line field key down", () => {
 
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
     });
-})
+});
 
 describe("`handleFieldInput`", () => {
     let h1: HTMLHeadingElement;
@@ -238,18 +251,30 @@ describe("`handleFieldInput`", () => {
     });
 
     test("should call `sendFieldEvent` on input event", () => {
-        const spiedSendFieldEvent = vi.spyOn(generateOverlay, "sendFieldEvent")
+        const spiedSendFieldEvent = vi.spyOn(generateOverlay, "sendFieldEvent");
         const consoleError = vi.spyOn(console, "error");
-        spiedSendFieldEvent.mockImplementation(() => { 
-            throw new Error("sendFieldEvent not implemented")
+        spiedSendFieldEvent.mockImplementation(() => {
+            throw new Error("sendFieldEvent not implemented");
         });
         const inputEvent = new InputEvent("input", {
             bubbles: true,
         });
         h1.dispatchEvent(inputEvent);
 
-        expect(spiedSendFieldEvent).toHaveBeenCalledWith({ visualBuilderContainer, eventType: VisualBuilderPostMessageEvents.SYNC_FIELD });
+        expect(spiedSendFieldEvent).toHaveBeenCalledWith({
+            visualBuilderContainer,
+            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,
+        });
         expect(consoleError).toHaveBeenCalled();
     });
 
-})
+    test("should set focusFieldReceivedInput to true", () => {
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+        expect(
+            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput
+        ).toBe(true);
+    });
+});

src/visualBuilder/utils/handleFieldMouseDown.ts

@@ -8,6 +8,7 @@ import {
 import { FieldDataType } from "./types/index.types";
 import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
 import { insertSpaceAtCursor } from "./insertSpaceAtCursor";
+import { VisualBuilder } from "..";
 
 export function handleFieldInput(e: Event): void {
     const event = e as InputEvent;
@@ -19,6 +20,13 @@ export function handleFieldInput(e: Event): void {
         event.type === "input" &&
         ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)
     ) {
+        if (
+            !VisualBuilder.VisualBuilderGlobalState.value
+                .focusFieldReceivedInput
+        ) {
+            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =
+                true;
+        }
         throttledFieldSync();
     }
 }