From 399ce1e01a20c1b5933f21d8ac3961d84c6839aa Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Wed, 27 Apr 2022 17:04:21 +0530
Subject: [PATCH] fix: don't bind text to container if double clicked else
 instead of center (#5105)

---
 src/components/App.tsx           |  3 +--
 src/element/textWysiwyg.test.tsx | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index a5c6ddff7..b82db477c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2239,8 +2239,7 @@ class App extends React.Component<AppProps, AppState> {
       if (isTextElement(selectedElements[0])) {
         existingTextElement = selectedElements[0];
       } else if (isTextBindableContainer(selectedElements[0], false)) {
-        container = selectedElements[0];
-        existingTextElement = getBoundTextElement(container);
+        existingTextElement = getBoundTextElement(selectedElements[0]);
       }
     }
 
diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx
index d9753c89b..ae7f1341c 100644
--- a/src/element/textWysiwyg.test.tsx
+++ b/src/element/textWysiwyg.test.tsx
@@ -544,6 +544,29 @@ describe("textWysiwyg", () => {
       expect((h.elements[1] as ExcalidrawTextElement).containerId).toBe(null);
     });
 
+    it("should'nt bind text to container when not double clicked on center", async () => {
+      expect(h.elements.length).toBe(1);
+      expect(h.elements[0].id).toBe(rectangle.id);
+
+      // clicking somewhere on top left
+      mouse.doubleClickAt(rectangle.x + 20, rectangle.y + 20);
+      expect(h.elements.length).toBe(2);
+
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(null);
+      mouse.down();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+
+      await new Promise((r) => setTimeout(r, 0));
+      editor.blur();
+      expect(rectangle.boundElements).toBe(null);
+    });
+
     it("should update font family correctly on undo/redo by selecting bounded text when font family was updated", async () => {
       expect(h.elements.length).toBe(1);