fix: focus canvas on attach

This ensures that users can do modeling operations right away.
camunda · Nov 20, 2024 · 0eb28f0 · 0eb28f0
1 parent 0f8af12
commit 0eb28f0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/client/src/app/tabs/bpmn/BpmnEditor.js b/client/src/app/tabs/bpmn/BpmnEditor.js
@@ -216,6 +216,8 @@ export class BpmnEditor extends CachedComponent {
   listen(fn) {
     const modeler = this.getModeler();
 
+    modeler[fn]('attach', this.handleAttach);
+
     [
       'import.done',
       'saveXML.done',
@@ -303,6 +305,12 @@ export class BpmnEditor extends CachedComponent {
     });
   };
 
+  handleAttach = (event) => {
+    const modeler = this.getModeler();
+
+    modeler.get('canvas').focus();
+  };
+
   handleError = (event) => {
     const {
       error

diff --git a/client/src/app/tabs/cloud-bpmn/BpmnEditor.js b/client/src/app/tabs/cloud-bpmn/BpmnEditor.js
@@ -208,6 +208,8 @@ export class BpmnEditor extends CachedComponent {
   listen(fn) {
     const modeler = this.getModeler();
 
+    modeler[fn]('attach', this.handleAttach);
+
     [
       'import.done',
       'saveXML.done',
@@ -217,7 +219,7 @@ export class BpmnEditor extends CachedComponent {
       'elements.copied',
       'propertiesPanel.focusin',
       'propertiesPanel.focusout',
-      'canvas.focus.changed',
+      'canvas.focus.changed'
     ].forEach((event) => {
       modeler[fn](event, this.handleChanged);
     });
@@ -295,6 +297,12 @@ export class BpmnEditor extends CachedComponent {
     });
   };
 
+  handleAttach = (event) => {
+    const modeler = this.getModeler();
+
+    modeler.get('canvas').focus();
+  };
+
   handleError = (event) => {
     const {
       error

diff --git a/client/test/mocks/bpmn-js/Modeler.js b/client/test/mocks/bpmn-js/Modeler.js
@@ -125,6 +125,7 @@ export default class Modeler {
         resized() {},
         isFocused() { return true; },
         restoreFocus() {},
+        focus() {}
       },
       clipboard: {
         isEmpty() {}