From 724be042d3439a076f0c27445926de78b1c9981d Mon Sep 17 00:00:00 2001
From: Nico Rehwaldt <nico.rehwaldt@camunda.com>
Date: Thu, 19 Dec 2024 15:56:46 +0100
Subject: [PATCH] fix(core/Canvas): explicitly enable autoFocus

We'll otherwise break embedding with existing applications, cf.
https://github.com/bpmn-io/bpmn-js-examples/pull/302.
---
 lib/core/Canvas.js           |  3 ++-
 test/spec/core/CanvasSpec.js | 37 +++++++++++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

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 <config.autoFocus>', 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() {