fix: change which element keydown is bound to from document to injection div (#8188)

* Change which element keydown is bound to

* Modify keydown tests

* Use browserEvents.conditionalBind()

* Remove commented out code.

core/inject.ts

@@ -77,6 +77,8 @@ export function inject(
     common.setMainWorkspace(workspace);
   });
 
+  browserEvents.conditionalBind(subContainer, 'keydown', null, onKeyDown);
+
   return workspace;
 }
 
@@ -320,8 +322,6 @@ let documentEventsBound = false;
  * Most of these events should be bound to the SVG's surface.
  * However, 'mouseup' has to be on the whole document so that a block dragged
  * out of bounds and released will know that it has been released.
- * Also, 'keydown' has to be on the whole document since the browser doesn't
- * understand a concept of focus on the SVG image.
  */
 function bindDocumentEvents() {
   if (!documentEventsBound) {
@@ -333,7 +333,6 @@ function bindDocumentEvents() {
         }
       }
     });
-    browserEvents.conditionalBind(document, 'keydown', null, onKeyDown);
     // longStop needs to run to stop the context menu from showing up.  It
     // should run regardless of what other touch event handlers have run.
     browserEvents.bind(document, 'touchend', null, Touch.longStop);

tests/mocha/keydown_test.js

@@ -16,6 +16,7 @@ suite('Key Down', function () {
   setup(function () {
     sharedTestSetup.call(this);
     this.workspace = Blockly.inject('blocklyDiv', {});
+    this.injectionDiv = this.workspace.getInjectionDiv();
   });
   teardown(function () {
     sharedTestTeardown.call(this);
@@ -42,7 +43,7 @@ suite('Key Down', function () {
     const name = opt_name ? opt_name : 'Not called when readOnly is true';
     test(name, function () {
       this.workspace.options.readOnly = true;
-      document.dispatchEvent(keyEvent);
+      this.injectionDiv.dispatchEvent(keyEvent);
       sinon.assert.notCalled(this.hideChaffSpy);
     });
   }
@@ -56,7 +57,7 @@ suite('Key Down', function () {
       );
     });
     test('Simple', function () {
-      document.dispatchEvent(this.event);
+      this.injectionDiv.dispatchEvent(this.event);
       sinon.assert.calledOnce(this.hideChaffSpy);
     });
     runReadOnlyTest(createKeyDownEvent(Blockly.utils.KeyCodes.ESC));
@@ -68,7 +69,7 @@ suite('Key Down', function () {
     });
     test('Not called on hidden workspaces', function () {
       this.workspace.isVisible_ = false;
-      document.dispatchEvent(this.event);
+      this.injectionDiv.dispatchEvent(this.event);
       sinon.assert.notCalled(this.hideChaffSpy);
     });
   });
@@ -92,7 +93,7 @@ suite('Key Down', function () {
         const testCaseName = testCase[0];
         const keyEvent = testCase[1];
         test(testCaseName, function () {
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.calledOnce(this.hideChaffSpy);
           sinon.assert.calledOnce(this.deleteSpy);
         });
@@ -143,7 +144,7 @@ suite('Key Down', function () {
         const testCaseName = testCase[0];
         const keyEvent = testCase[1];
         test(testCaseName, function () {
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.calledOnce(this.copySpy);
           sinon.assert.calledOnce(this.hideChaffSpy);
         });
@@ -164,7 +165,7 @@ suite('Key Down', function () {
         const keyEvent = testCase[1];
         test(testCaseName, function () {
           sinon.stub(Blockly.Gesture, 'inProgress').returns(true);
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.notCalled(this.copySpy);
           sinon.assert.notCalled(this.hideChaffSpy);
         });
@@ -179,7 +180,7 @@ suite('Key Down', function () {
           sinon
             .stub(Blockly.common.getSelected(), 'isDeletable')
             .returns(false);
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.notCalled(this.copySpy);
           sinon.assert.notCalled(this.hideChaffSpy);
         });
@@ -192,7 +193,7 @@ suite('Key Down', function () {
         const keyEvent = testCase[1];
         test(testCaseName, function () {
           sinon.stub(Blockly.common.getSelected(), 'isMovable').returns(false);
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.notCalled(this.copySpy);
           sinon.assert.notCalled(this.hideChaffSpy);
         });
@@ -234,7 +235,7 @@ suite('Key Down', function () {
         const testCaseName = testCase[0];
         const keyEvent = testCase[1];
         test(testCaseName, function () {
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.calledOnce(this.undoSpy);
           sinon.assert.calledWith(this.undoSpy, false);
           sinon.assert.calledOnce(this.hideChaffSpy);
@@ -248,7 +249,7 @@ suite('Key Down', function () {
         const keyEvent = testCase[1];
         test(testCaseName, function () {
           sinon.stub(Blockly.Gesture, 'inProgress').returns(true);
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.notCalled(this.undoSpy);
           sinon.assert.notCalled(this.hideChaffSpy);
         });
@@ -301,7 +302,7 @@ suite('Key Down', function () {
         const testCaseName = testCase[0];
         const keyEvent = testCase[1];
         test(testCaseName, function () {
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.calledOnce(this.redoSpy);
           sinon.assert.calledWith(this.redoSpy, true);
           sinon.assert.calledOnce(this.hideChaffSpy);
@@ -315,7 +316,7 @@ suite('Key Down', function () {
         const keyEvent = testCase[1];
         test(testCaseName, function () {
           sinon.stub(Blockly.Gesture, 'inProgress').returns(true);
-          document.dispatchEvent(keyEvent);
+          this.injectionDiv.dispatchEvent(keyEvent);
           sinon.assert.notCalled(this.redoSpy);
           sinon.assert.notCalled(this.hideChaffSpy);
         });
@@ -343,14 +344,14 @@ suite('Key Down', function () {
       );
     });
     test('Simple', function () {
-      document.dispatchEvent(this.ctrlYEvent);
+      this.injectionDiv.dispatchEvent(this.ctrlYEvent);
       sinon.assert.calledOnce(this.undoSpy);
       sinon.assert.calledWith(this.undoSpy, true);
       sinon.assert.calledOnce(this.hideChaffSpy);
     });
     test('Not called when a gesture is in progress', function () {
       sinon.stub(Blockly.Gesture, 'inProgress').returns(true);
-      document.dispatchEvent(this.ctrlYEvent);
+      this.injectionDiv.dispatchEvent(this.ctrlYEvent);
       sinon.assert.notCalled(this.undoSpy);
       sinon.assert.notCalled(this.hideChaffSpy);
     });