fix(FeelEditor): focus editor on container click

related to camunda/camunda-modeler#3072
bpmn-io · Sep 6, 2022 · 2ed1536 · 2ed1536
1 parent 7236525
commit 2ed1536
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/components/entries/FEEL/FeelEditor.js b/src/components/entries/FEEL/FeelEditor.js
@@ -105,9 +105,17 @@ const CodeEditor = forwardRef((props, ref) => {
     setLocalValue(value);
   }, [ value ]);
 
+  const handleClick = () => {
+    ref.current.focus();
+  };
 
   return <div class={ classNames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null) }>
-    <div name={ props.name } class={ classNames('bio-properties-panel-input', localValue ? 'edited' : null) } ref={ inputRef }></div>
+    <div
+      name={ props.name }
+      class={ classNames('bio-properties-panel-input', localValue ? 'edited' : null) }
+      ref={ inputRef }
+      onClick={ handleClick }
+    ></div>
   </div>;
 });
 

diff --git a/test/spec/components/FeelEditor.spec.js b/test/spec/components/FeelEditor.spec.js
@@ -79,6 +79,22 @@ describe('<FeelEditor>', function() {
     expect(suggestions.children).to.have.length(1);
   });
 
+
+  it('should focus on container click', async function() {
+
+    // given
+    render(<Wrapper />, { container });
+
+    const input = domQuery('.bio-properties-panel-input', container);
+    const editor = domQuery('[role="textbox"]', container);
+
+    // when
+    input.click();
+
+    // then
+    expect(document.activeElement).to.equal(editor);
+  });
+
 });