Finish drag on focus change

src/actions/mover.ts

@@ -125,16 +125,21 @@ export class Mover {
     );
     if (!DraggerClass) throw new Error('no Dragger registered');
     const dragger = new DraggerClass(block, workspace);
+    // Set up a blur listener to end the move if the user clicks away
+    const blurListener = () => {
+      this.finishMove(workspace);
+    };
     // Record that a move is in progress and start dragging.
     workspace.setKeyboardMoveInProgress(true);
-    const info = new MoveInfo(block, dragger);
+    const info = new MoveInfo(block, dragger, blurListener);
     this.moves.set(workspace, info);
     // Begin drag.
     dragger.onDragStart(info.fakePointerEvent('pointerdown'));
     info.updateTotalDelta();
     // In case the block is detached, ensure that it still retains focus
     // (otherwise dragging will break).
     getFocusManager().focusNode(block);
+    block.getFocusableElement().addEventListener('blur', blurListener);
     return true;
   }
 
@@ -152,6 +157,11 @@ export class Mover {
     const info = this.moves.get(workspace);
     if (!info) throw new Error('no move info for workspace');
 
+    // Remove the blur listener before ending the drag
+    info.block
+      .getFocusableElement()
+      .removeEventListener('blur', info.blurListener);
+
     info.dragger.onDragEnd(
       info.fakePointerEvent('pointerup'),
       new utils.Coordinate(0, 0),
@@ -341,6 +351,7 @@ export class MoveInfo {
   constructor(
     readonly block: BlockSvg,
     readonly dragger: IDragger,
+    readonly blurListener: EventListener,
   ) {
     this.parentNext = block.previousConnection?.targetConnection ?? null;
     this.parentInput = block.outputConnection?.targetConnection ?? null;