Arrows binds/unbinds to bindable elements when moved with arrow keys (Issue #2103) (#2150)

src/components/App.tsx

@@ -1530,6 +1530,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         });
       });
 
+      this.maybeSuggestBindingForAll(selectedElements);
+
       event.preventDefault();
     } else if (event.key === KEYS.ENTER) {
       const selectedElements = getSelectedElements(
@@ -1601,6 +1603,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     if (!event[KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) {
       this.setState({ isBindingEnabled: true });
     }
+    if (isArrowKey(event.key)) {
+      const selectedElements = getSelectedElements(
+        this.scene.getElements(),
+        this.state,
+      );
+      isBindingEnabled(this.state)
+        ? bindOrUnbindSelectedElements(selectedElements)
+        : unbindLinearElements(selectedElements);
+      this.setState({ suggestedBindings: [] });
+    }
   });
 
   private selectShapeTool(elementType: AppState["elementType"]) {

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

@@ -2676,7 +2676,7 @@ Object {
 
 exports[`regression tests arrow keys: [end of test] number of elements 1`] = `1`;
 
-exports[`regression tests arrow keys: [end of test] number of renders 1`] = `13`;
+exports[`regression tests arrow keys: [end of test] number of renders 1`] = `19`;
 
 exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] appState 1`] = `
 Object {

src/tests/binding.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "./test-utils";
 import App from "../components/App";
-import { UI, Pointer } from "./helpers/ui";
+import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
 
@@ -79,4 +79,28 @@ describe("element binding", () => {
       expect(API.getSelectedElement().type).toBe("rectangle");
     },
   );
+
+  it("should bind/unbind arrow when moving it with keyboard", () => {
+    const rectangle = UI.createElement("rectangle", {
+      x: 75,
+      y: 0,
+      size: 100,
+    });
+
+    // Creates arrow 1px away from bidding with rectangle
+    const arrow = UI.createElement("arrow", {
+      x: 0,
+      y: 0,
+      size: 50,
+    });
+
+    expect(arrow.endBinding).toBe(null);
+
+    expect(API.getSelectedElement().type).toBe("arrow");
+    Keyboard.hotkeyPress("ARROW_RIGHT");
+    expect(arrow.endBinding?.elementId).toBe(rectangle.id);
+
+    Keyboard.hotkeyPress("ARROW_LEFT");
+    expect(arrow.endBinding).toBe(null);
+  });
 });