Revert "fix: update field event is not sent when input event does not occur in inline editable fields"

Author: faraazb

src/visualBuilder/generators/generateOverlay.tsx

@@ -8,6 +8,7 @@ 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";
 
@@ -118,10 +119,7 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
             }
         });
 
-        if (
-            !noTrigger &&
-            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput
-        ) {
+        if (!noTrigger) {
             sendFieldEvent({
                 visualBuilderContainer,
                 eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,
@@ -138,8 +136,6 @@ 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,7 +62,6 @@ interface VisualBuilderGlobalStateImpl {
     previousHoveredTargetDOM: Element | null;
     previousEmptyBlockParents: Element[] | [];
     focusFieldValue: string | null;
-    focusFieldReceivedInput: boolean;
     audienceMode: boolean;
     locale: string;
     variant: string | null;
@@ -83,7 +82,6 @@ export class VisualBuilder {
             previousHoveredTargetDOM: null,
             previousEmptyBlockParents: [],
             focusFieldValue: null,
-            focusFieldReceivedInput: false,
             audienceMode: false,
             locale: Config.get().stackDetails.masterLocale || "en-us",
             variant: null,
@@ -210,7 +208,9 @@ export class VisualBuilder {
                 );
 
                 const emptyBlockParents = Array.from(
-                    document.querySelectorAll(`.${VB_EmptyBlockParentClass}`)
+                    document.querySelectorAll(
+                        `.${VB_EmptyBlockParentClass}`
+                    )
                 );
 
                 const previousEmptyBlockParents = VisualBuilder

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

@@ -156,8 +156,6 @@ 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,22 +6,12 @@ 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 } from "@testing-library/preact";
-import { VisualBuilder } from "../../index";
-
-vi.mock("../../index", async () => ({
-    VisualBuilder: {
-        VisualBuilderGlobalState: {
-            value: { focusFieldReceivedInput: false },
-        },
-    },
-}));
+import { waitFor, screen } from "@testing-library/preact";
 
 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;
@@ -127,7 +117,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");
 
@@ -190,10 +180,7 @@ 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");
@@ -222,7 +209,7 @@ describe("handle single line field key down", () => {
 
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
     });
-});
+})
 
 describe("`handleFieldInput`", () => {
     let h1: HTMLHeadingElement;
@@ -251,30 +238,18 @@ 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,7 +8,6 @@ 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;
@@ -20,13 +19,6 @@ 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();
     }
 }