fix(EditableTypography): Enter and Esc click to end edit mode is bubbling to other places afterwards

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();
@@ -274,3 +321,4 @@ describe("EditableText", () => {
     });
   });
 });
+

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);
       }
@@ -311,3 +314,4 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
 );
 
 export default EditableTypography;
+