Merge pull request #427 from contentstack/VE-5803-space-key-element-inside-button

fix(VE-5803): sync field after custom space handling

Author: faraazb

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

@@ -128,6 +128,21 @@ describe("handle numeric field key down", () => {
 });
 
 describe("handle keydown in button contenteditable", () => {
+    let spiedSendFieldEvent: MockInstance<() => void> | undefined;
+
+    beforeEach(() => {
+        spiedSendFieldEvent = vi
+            .spyOn(generateOverlay, "sendFieldEvent")
+            .mockImplementation(() => {});
+        const visualBuilderContainer = document.createElement("div");
+        visualBuilderContainer.classList.add("visual-builder__container");
+        document.body.appendChild(visualBuilderContainer);
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
     test("should insert space in button content-editable", () => {
         let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
         vi.spyOn(window, "getSelection").mockReturnValue({
@@ -164,6 +179,7 @@ describe("handle keydown in button contenteditable", () => {
 
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
         expect(spiedInsertSpaceAtCursor).toHaveBeenCalledWith(button);
+        expect(spiedSendFieldEvent).toHaveBeenCalled();
     });
 
     test("should insert space in span content-editable inside button", () => {
@@ -203,6 +219,7 @@ describe("handle keydown in button contenteditable", () => {
 
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
         expect(spiedInsertSpaceAtCursor).toHaveBeenCalledWith(span);
+        expect(spiedSendFieldEvent).toHaveBeenCalled();
     });
 });
 

src/visualBuilder/utils/handleFieldMouseDown.ts

@@ -52,6 +52,7 @@ export function handleFieldKeyDown(e: Event): void {
                     element instanceof Element && element.tagName === "BUTTON"
             )
     ) {
+        // custom space handling when a button is involved
         handleKeyDownOnButton(event);
     }
     if (fieldType === FieldDataType.NUMBER) {
@@ -63,11 +64,12 @@ export function handleFieldKeyDown(e: Event): void {
 
 // spaces do not work inside a button content-editable
 // this adds a space and moves the cursor ahead, the
-// button press event is also prevented
+// button press event is also prevented, finally syncs the field
 function handleKeyDownOnButton(e: KeyboardEvent) {
     if (e.code === "Space" && e.target) {
         e.preventDefault();
         insertSpaceAtCursor(e.target as HTMLElement);
+        throttledFieldSync();
     }
 }