Merge pull request #422 from contentstack/VE-5361-no-update-on-no-input

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

Author: faraazb

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,12 +118,16 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
             }
         });
 
-        if (!noTrigger) {
+        if (
+            !noTrigger &&
+            // send update when focussed field has received input
+            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput
+        ) {
             sendFieldEvent({
                 visualBuilderContainer,
                 eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,
             });
-        } else {
+        } else if (noTrigger) {
             const { previousSelectedEditableDOM, focusFieldValue } =
                 VisualBuilder.VisualBuilderGlobalState.value || {};
             if (
@@ -136,6 +139,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

@@ -62,6 +62,7 @@ interface VisualBuilderGlobalStateImpl {
     previousHoveredTargetDOM: Element | null;
     previousEmptyBlockParents: Element[] | [];
     focusFieldValue: string | null;
+    focusFieldReceivedInput: boolean;
     audienceMode: boolean;
     locale: string;
     variant: string | null;
@@ -82,6 +83,7 @@ export class VisualBuilder {
             previousHoveredTargetDOM: null,
             previousEmptyBlockParents: [],
             focusFieldValue: null,
+            focusFieldReceivedInput: false,
             audienceMode: false,
             locale: Config.get().stackDetails.masterLocale || "en-us",
             variant: null,
@@ -208,9 +210,7 @@ export class VisualBuilder {
                 );
 
                 const emptyBlockParents = Array.from(
-                    document.querySelectorAll(
-                        `.${VB_EmptyBlockParentClass}`
-                    )
+                    document.querySelectorAll(`.${VB_EmptyBlockParentClass}`)
                 );
 
                 const previousEmptyBlockParents = VisualBuilder
@@ -417,6 +417,7 @@ export class VisualBuilder {
             previousHoveredTargetDOM: null,
             previousEmptyBlockParents: [],
             focusFieldValue: null,
+            focusFieldReceivedInput: false,
             audienceMode: false,
             locale: "en-us",
             variant: null,

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;
@@ -268,6 +270,32 @@ describe("hideFocusOverlay", () => {
         );
     });
 
+    test("should not send update field event when focusFieldReceivedInput is false", async () => {
+        editedElement.setAttribute("contenteditable", "true");
+
+        // Set up global state
+        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =
+            editedElement;
+        VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =
+            false;
+
+        expect(focusOverlayWrapper.classList.contains("visible")).toBe(true);
+
+        hideFocusOverlay({
+            visualBuilderContainer,
+            visualBuilderOverlayWrapper: focusOverlayWrapper,
+            focusedToolbar: document.querySelector(".visual-builder__toolbar"),
+            resizeObserver: mockResizeObserver,
+            noTrigger: false
+        });
+
+        expect(focusOverlayWrapper.classList.contains("visible")).toBe(false);
+
+        await waitFor(() => {
+            expect(visualBuilderPostMessage?.send).not.toHaveBeenCalled();
+        });
+    });
+
     test("should run cleanup function", () => {
         // We"ll always click one of the overlays, so we can just grab the first one. Manually pointing the global state to the editedElement as we are not simulating mouse click on window here.
         VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =

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");
 
@@ -231,7 +241,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");
@@ -260,7 +273,7 @@ describe("handle single line field key down", () => {
 
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
     });
-})
+});
 
 describe("`handleFieldInput`", () => {
     let h1: HTMLHeadingElement;
@@ -289,18 +302,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();
     }
 }