Fix bug of issue #2062 (#2108)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -3435,23 +3435,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements))
       ) {
         // Deselect selected elements
-        this.setState({
-          selectedElementIds: {},
-          selectedGroupIds: {},
-        });
-      }
-
-      if (draggingElement === null) {
-        // if no element is clicked, clear the selection and redraw
         this.setState({
           selectedElementIds: {},
           selectedGroupIds: {},
           editingGroupId: null,
         });
+
         return;
       }
 
-      if (!elementLocked) {
+      if (!elementLocked && draggingElement) {
         this.setState((prevState) => ({
           selectedElementIds: {
             ...prevState.selectedElementIds,

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -4593,7 +4593,29 @@ Object {
   "cursorButton": "up",
   "cursorX": 0,
   "cursorY": 0,
-  "draggingElement": null,
+  "draggingElement": Object {
+    "angle": 0,
+    "backgroundColor": "transparent",
+    "boundElementIds": null,
+    "fillStyle": "hachure",
+    "groupIds": Array [],
+    "height": 0,
+    "id": "id3",
+    "isDeleted": false,
+    "opacity": 100,
+    "roughness": 1,
+    "seed": 2019559783,
+    "strokeColor": "#000000",
+    "strokeSharpness": "sharp",
+    "strokeStyle": "solid",
+    "strokeWidth": 1,
+    "type": "selection",
+    "version": 1,
+    "versionNonce": 0,
+    "width": 0,
+    "x": 50,
+    "y": 50,
+  },
   "editingElement": null,
   "editingGroupId": null,
   "editingLinearElement": null,
@@ -4624,9 +4646,7 @@ Object {
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
+  "selectedElementIds": Object {},
-    "id3": true,
-  },
   "selectedGroupIds": Object {},
   "selectionElement": null,
   "shouldAddWatermark": false,
@@ -5038,7 +5058,29 @@ Object {
   "cursorButton": "up",
   "cursorX": 0,
   "cursorY": 0,
-  "draggingElement": null,
+  "draggingElement": Object {
+    "angle": 0,
+    "backgroundColor": "transparent",
+    "boundElementIds": null,
+    "fillStyle": "hachure",
+    "groupIds": Array [],
+    "height": 0,
+    "id": "id1",
+    "isDeleted": false,
+    "opacity": 100,
+    "roughness": 1,
+    "seed": 449462985,
+    "strokeColor": "#000000",
+    "strokeSharpness": "sharp",
+    "strokeStyle": "solid",
+    "strokeWidth": 1,
+    "type": "selection",
+    "version": 1,
+    "versionNonce": 0,
+    "width": 0,
+    "x": 100,
+    "y": 100,
+  },
   "editingElement": null,
   "editingGroupId": null,
   "editingLinearElement": null,
@@ -5067,9 +5109,7 @@ Object {
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
+  "selectedElementIds": Object {},
-    "id1": true,
-  },
   "selectedGroupIds": Object {},
   "selectionElement": null,
   "shouldAddWatermark": false,

src/tests/binding.test.tsx

@@ -3,6 +3,7 @@ import { render } from "./test-utils";
 import App from "../components/App";
 import { UI, Pointer } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
+import { API } from "./helpers/api";
 
 const { h } = window;
 
@@ -45,4 +46,37 @@ describe("element binding", () => {
     expect(arrow.startBinding?.elementId).toBe(rectRight.id);
     expect(arrow.endBinding?.elementId).toBe(rectLeft.id);
   });
+
+  it(
+    "editing arrow and moving its head to bind it to element A, finalizing the" +
+      "editing by clicking on element A should end up selecting A",
+    async () => {
+      UI.createElement("rectangle", {
+        y: 0,
+        size: 100,
+      });
+      // Create arrow bound to rectangle
+      UI.clickTool("arrow");
+      mouse.down(50, -100);
+      mouse.up(0, 80);
+
+      // Edit arrow with multi-point
+      mouse.doubleClick();
+      // move arrow head
+      mouse.down();
+      mouse.up(0, 10);
+      expect(API.getSelectedElement().type).toBe("arrow");
+
+      // NOTE this mouse down/up + await needs to be done in order to repro
+      //  the issue, due to https://github.com/excalidraw/excalidraw/blob/46bff3daceb602accf60c40a84610797260fca94/src/components/App.tsx#L740
+      mouse.reset();
+      expect(h.state.editingLinearElement).not.toBe(null);
+      mouse.down(0, 0);
+      await new Promise((r) => setTimeout(r, 100));
+      expect(h.state.editingLinearElement).toBe(null);
+      expect(API.getSelectedElement().type).toBe("rectangle");
+      mouse.up();
+      expect(API.getSelectedElement().type).toBe("rectangle");
+    },
+  );
 });