diff --git a/lib/core/Canvas.js b/lib/core/Canvas.js index 01841190a..8f337ead0 100644 --- a/lib/core/Canvas.js +++ b/lib/core/Canvas.js @@ -49,6 +49,7 @@ import { createMatrix as createMatrix } from 'tiny-svg'; * deferUpdate?: boolean; * width?: number; * height?: number; + * autoFocus?: boolean; * } } CanvasConfig * @typedef { { * group: SVGElement; @@ -235,7 +236,7 @@ Canvas.prototype._init = function(config) { domAttr(svg, 'tabindex', 0); - eventBus.on('element.hover', () => { + config.autoFocus && eventBus.on('element.hover', () => { this.restoreFocus(); }); diff --git a/test/spec/core/CanvasSpec.js b/test/spec/core/CanvasSpec.js index 2eb553df9..fab190d3f 100644 --- a/test/spec/core/CanvasSpec.js +++ b/test/spec/core/CanvasSpec.js @@ -20,7 +20,7 @@ import { import { getChildren as getChildrenGfx } from 'lib/util/GraphicsUtil'; -describe('Canvas', function() { +describe('core/Canvas', function() { var container; @@ -112,7 +112,7 @@ describe('Canvas', function() { }); - it('should focus if body is focused', inject(function(canvas, eventBus) { + it('should NOT focus if body is focused', inject(function(canvas, eventBus) { // given var svg = container.querySelector('svg'); @@ -124,7 +124,7 @@ describe('Canvas', function() { }); // then - expect(document.activeElement).to.equal(svg); + expect(document.activeElement).to.not.equal(svg); })); @@ -174,6 +174,37 @@ describe('Canvas', function() { }); + describe('focus handling ', function() { + + beforeEach(function() { + container = TestContainer.get(this); + }); + + beforeEach(createDiagram({ + canvas: { + autoFocus: true + } + })); + + + it('should focus if body is focused', inject(function(canvas, eventBus) { + + // given + var svg = container.querySelector('svg'); + + // when + eventBus.fire('element.hover', { + element: canvas.getRootElement(), + gfx: svg + }); + + // then + expect(document.activeElement).to.equal(svg); + })); + + }); + + describe('events', function() { beforeEach(function() {