Finish drag on focus change (#530)

* fix: End a keyboard move if the user moves focus off the block

* fix formatting

* Add test for finishing a drag on focus lost

* Formatting

Author: RoboErikG

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;

test/webdriverio/test/basic_test.ts

@@ -7,6 +7,7 @@
 import * as chai from 'chai';
 import * as Blockly from 'blockly';
 import {
+  isDragging,
   setCurrentCursorNodeById,
   setCurrentCursorNodeByIdAndFieldName,
   getCurrentFocusNodeId,
@@ -247,6 +248,21 @@ suite('Keyboard navigation on Blocks', function () {
       .expect(await getCurrentFocusedBlockId(this.browser))
       .equal('controls_repeat_1');
   });
+
+  test('Losing focus cancels move', async function () {
+    await tabNavigateToWorkspace(this.browser);
+    await this.browser.pause(PAUSE_TIME);
+    await setCurrentCursorNodeById(this.browser, 'text_print_1');
+    await this.browser.keys('m');
+    await this.browser.pause(PAUSE_TIME);
+
+    chai.assert.isTrue(await isDragging(this.browser));
+
+    await this.browser.keys(Key.Tab);
+    await this.browser.pause(PAUSE_TIME);
+
+    chai.assert.isFalse(await isDragging(this.browser));
+  });
 });
 
 // TODO(#499) These tests fail because focusing on a field doesn't update the cursor

test/webdriverio/test/test_setup.ts

@@ -356,3 +356,17 @@ export async function tabNavigateForward(browser: WebdriverIO.Browser) {
   await browser.keys(webdriverio.Key.Tab);
   await browser.pause(PAUSE_TIME);
 }
+
+/**
+ * Returns whether there's a drag in progress on the main workspace.
+ *
+ * @param browser The active WebdriverIO Browser object.
+ */
+export async function isDragging(
+  browser: WebdriverIO.Browser,
+): Promise<boolean> {
+  return await browser.execute(() => {
+    const workspaceSvg = Blockly.getMainWorkspace() as Blockly.WorkspaceSvg;
+    return workspaceSvg.isDragging();
+  });
+}