From 428ba51830eb34137ba51bfe016efcc4c4b67853 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 1 Jan 2025 12:02:14 +0200
Subject: [PATCH] fix(EditableTypography): Enter and Esc click to end edit mode
 is bubbling to other places afterwards (#2696)

---
 .../__tests__/EditableText.test.tsx           | 47 +++++++++++++++++++
 .../EditableTypography/EditableTypography.tsx |  3 ++
 2 files changed, 50 insertions(+)

diff --git a/packages/core/src/components/EditableText/__tests__/EditableText.test.tsx b/packages/core/src/components/EditableText/__tests__/EditableText.test.tsx
index 573816b66f..c34a22fd60 100644
--- a/packages/core/src/components/EditableText/__tests__/EditableText.test.tsx
+++ b/packages/core/src/components/EditableText/__tests__/EditableText.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render, cleanup, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import EditableText from "../EditableText";
 import { within } from "@storybook/testing-library";
 
@@ -223,6 +224,52 @@ describe("EditableText", () => {
     });
   });
 
+  describe("event bubbling and propagation", () => {
+    it("should prevent Enter key press from propagating outside EditableText", () => {
+      const onChange = jest.fn();
+      const externalKeyHandler = jest.fn();
+
+      render(
+        <div onKeyDown={externalKeyHandler} data-testid="external-container">
+          <EditableText value="Editable text" onChange={onChange} />
+        </div>
+      );
+
+      const component = screen.getByRole("button");
+      fireEvent.click(component);
+
+      const input = screen.getByRole("input");
+      fireEvent.change(input, { target: { value: "New value" } });
+      userEvent.keyboard("{enter}");
+
+      expect(onChange).toHaveBeenCalledWith("New value");
+      expect(externalKeyHandler).not.toHaveBeenCalled();
+    });
+
+    it("should prevent Esc key press from propagating outside EditableText", () => {
+      const onChange = jest.fn();
+      const onEditModeChange = jest.fn();
+      const externalKeyHandler = jest.fn();
+
+      render(
+        <div onKeyDown={externalKeyHandler} data-testid="external-container">
+          <EditableText value="Editable text" onChange={onChange} onEditModeChange={onEditModeChange} />
+        </div>
+      );
+
+      const component = screen.getByRole("button");
+      fireEvent.click(component);
+
+      const input = screen.getByRole("input");
+      fireEvent.change(input, { target: { value: "New value" } });
+      userEvent.keyboard("{escape}");
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onEditModeChange).toHaveBeenCalledTimes(2);
+      expect(externalKeyHandler).not.toHaveBeenCalled();
+    });
+  });
+
   describe("with placeholder", () => {
     it("should show a placeholder if provided and input is empty", async () => {
       const onChange = jest.fn();
diff --git a/packages/core/src/components/EditableTypography/EditableTypography.tsx b/packages/core/src/components/EditableTypography/EditableTypography.tsx
index 3969d431e7..d69be1c3f0 100644
--- a/packages/core/src/components/EditableTypography/EditableTypography.tsx
+++ b/packages/core/src/components/EditableTypography/EditableTypography.tsx
@@ -144,9 +144,12 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
         }
 
         event.preventDefault();
+        event.stopPropagation();
         handleInputValueChange();
       }
       if (event.key === keyCodes.ESCAPE) {
+        event.preventDefault();
+        event.stopPropagation();
         handleEditModeChange(false);
         setInputValue(value);
       }