diff --git a/packages/react-canvas-core/src/Toolkit.ts b/packages/react-canvas-core/src/Toolkit.ts index 55a5b855..2fb7fbee 100644 --- a/packages/react-canvas-core/src/Toolkit.ts +++ b/packages/react-canvas-core/src/Toolkit.ts @@ -20,7 +20,7 @@ export class Toolkit { public static closest(element: Element, selector: string) { if (!Element.prototype.closest) { - Element.prototype.closest = function(s) { + Element.prototype.closest = function (s) { var el = this; do { diff --git a/packages/react-canvas-core/src/core-actions/ActionEventBus.ts b/packages/react-canvas-core/src/core-actions/ActionEventBus.ts index 769ca397..031486d7 100644 --- a/packages/react-canvas-core/src/core-actions/ActionEventBus.ts +++ b/packages/react-canvas-core/src/core-actions/ActionEventBus.ts @@ -80,4 +80,10 @@ export class ActionEventBus { action.options.fire(actionEvent as any); } } + + clearKeys() { + _.forEach(Object.keys(this.keys), (key) => { + document.dispatchEvent(new KeyboardEvent('keyup', { key: key })); + }); + } } diff --git a/packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx b/packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx index 77a06cf8..1c81a5f7 100644 --- a/packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx +++ b/packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx @@ -21,6 +21,7 @@ export class CanvasWidget extends React.Component { ref: React.RefObject; keyUp: any; keyDown: any; + blur: any; canvasListener: any; constructor(props: DiagramProps) { @@ -65,9 +66,13 @@ export class CanvasWidget extends React.Component { this.keyUp = (event) => { this.props.engine.getActionEventBus().fireAction({ event }); }; + this.blur = () => { + this.props.engine.getActionEventBus().clearKeys(); + }; document.addEventListener('keyup', this.keyUp); document.addEventListener('keydown', this.keyDown); + document.addEventListener('blur', this.blur); this.registerCanvas(); }