fix(core): prevent scrolling on canvas focus

bpmn-io · Aug 18, 2022 · d6970a9 · d6970a9
1 parent 0c1274a
commit d6970a9
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 1 deletion.
diff --git a/lib/core/Canvas.js b/lib/core/Canvas.js
@@ -177,7 +177,7 @@ Canvas.prototype._init = function(config) {
 
   eventBus.on('element.hover', function() {
     if (document.activeElement === document.body) {
-      svg.focus();
+      svg.focus({ preventScroll: true });
     }
   });
 

diff --git a/test/spec/core/CanvasSpec.js b/test/spec/core/CanvasSpec.js
@@ -64,6 +64,97 @@ describe('Canvas', function() {
   });
 
 
+  describe('focus handling', function() {
+
+    beforeEach(function() {
+      container = TestContainer.get(this);
+    });
+
+    beforeEach(createDiagram());
+
+
+    it('should be focusable', function() {
+
+      // given
+      var svg = container.querySelector('svg');
+
+      // when
+      svg.focus();
+
+      // then
+      expect(document.activeElement).to.equal(svg);
+    });
+
+
+    describe('<hover>', function() {
+
+      beforeEach(function() {
+        document.body.focus();
+      });
+
+
+      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);
+      }));
+
+
+      (isPhantomJS() ? it.skip : it)('should not scroll on focus', inject(function(canvas, eventBus) {
+
+        // given
+        var svg = container.querySelector('svg');
+
+        var clientRect = svg.getBoundingClientRect();
+
+        // when
+        eventBus.fire('element.hover', {
+          element: canvas.getRootElement(),
+          gfx: svg
+        });
+
+        // then
+        expect(clientRect).to.eql(svg.getBoundingClientRect());
+      }));
+
+
+      it('should not focus on existing document focus', inject(function(canvas, eventBus) {
+
+        // given
+        var inputEl = document.createElement('input');
+
+        document.body.appendChild(inputEl);
+        inputEl.focus();
+
+        // assume
+        expect(document.activeElement).to.equal(inputEl);
+
+        var svg = container.querySelector('svg');
+
+        // when
+        eventBus.fire('element.hover', {
+          element: canvas.getRootElement(),
+          gfx: svg
+        });
+
+        // then
+        expect(document.activeElement).to.eql(inputEl);
+      }));
+
+    });
+
+  });
+
+
   describe('events', function() {
 
     beforeEach(function() {
@@ -2575,4 +2666,9 @@ function expectChildren(parent, children) {
     expect(existingChildrenGfx).to.eql(expectedChildrenGfx);
   });
 
+}
+
+
+function isPhantomJS() {
+  return /PhantomJS/.test(window.navigator.userAgent);
 }