fix: custom space key handling when a button element is on the composed path

If there is a button element on the composed path, then the browser will send a click
event on the button when space key is pressed. stopPropagation does not work as this
is not a propagated event but something done by the browser. So, whenever a button
is detected on the event's composed path, use custom space key handling.

Author: faraazb-contentstack

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

@@ -128,26 +128,21 @@ describe("handle numeric field key down", () => {
 });
 
 describe("handle keydown in button contenteditable", () => {
-    let button: HTMLButtonElement | undefined;
-    let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
-    let spiedInsertSpaceAtCursor:
-        | MockInstance<(typeof insertSpaceAtCursor)["insertSpaceAtCursor"]>
-        | undefined;
-
     test("should insert space in button content-editable", () => {
+        let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
         vi.spyOn(window, "getSelection").mockReturnValue({
-            // @ts-ignore
+            // @ts-expect-error mocking only required properties
             getRangeAt: (n: number) => ({
                 startOffset: 0,
                 endOffset: 0,
             }),
         });
-        spiedInsertSpaceAtCursor = vi.spyOn(
+        const spiedInsertSpaceAtCursor = vi.spyOn(
             insertSpaceAtCursor,
             "insertSpaceAtCursor"
         );
 
-        button = document.createElement("button");
+        const button = document.createElement("button");
         button.innerHTML = "Test";
         button.setAttribute("contenteditable", "true");
         button.setAttribute(
@@ -170,6 +165,45 @@ describe("handle keydown in button contenteditable", () => {
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
         expect(spiedInsertSpaceAtCursor).toHaveBeenCalledWith(button);
     });
+
+    test("should insert space in span content-editable inside button", () => {
+        let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
+        vi.spyOn(window, "getSelection").mockReturnValue({
+            // @ts-expect-error mocking only required properties
+            getRangeAt: (n: number) => ({
+                startOffset: 0,
+                endOffset: 0,
+            }),
+        });
+        const spiedInsertSpaceAtCursor = vi.spyOn(
+            insertSpaceAtCursor,
+            "insertSpaceAtCursor"
+        );
+
+        const button = document.createElement("button");
+        const span = document.createElement("span");
+        button.appendChild(span);
+        span.setAttribute("contenteditable", "true");
+        span.setAttribute(
+            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
+            "single_line"
+        );
+
+        span.addEventListener("keydown", (e) => {
+            spiedPreventDefault = vi.spyOn(e, "preventDefault");
+            handleFieldKeyDown(e);
+        });
+
+        const keyDownEvent = new KeyboardEvent("keydown", {
+            bubbles: true,
+            key: "Space",
+            code: "Space",
+        });
+        span.dispatchEvent(keyDownEvent);
+
+        expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
+        expect(spiedInsertSpaceAtCursor).toHaveBeenCalledWith(span);
+    });
 });
 
 describe("handle single line field key down", () => {

src/visualBuilder/utils/handleFieldMouseDown.ts

@@ -44,7 +44,14 @@ export function handleFieldKeyDown(e: Event): void {
         VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
     ) as FieldDataType | null;
 
-    if (targetElement.tagName === "BUTTON") {
+    if (
+        event
+            .composedPath()
+            .some(
+                (element) =>
+                    element instanceof Element && element.tagName === "BUTTON"
+            )
+    ) {
         handleKeyDownOnButton(event);
     }
     if (fieldType === FieldDataType.NUMBER) {