fix: scroll keyboard selected element into view

Closes #6
bpmn-io · Mar 24, 2022 · 7b5bc68 · 7b5bc68
1 parent 6092bfa
commit 7b5bc68
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 3 deletions.
diff --git a/example/.camunda/element-templates/example.json b/example/.camunda/element-templates/example.json
@@ -179,6 +179,148 @@
         }
       }
     ]
+  },  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "REST Task 1",
+    "id": "io.camunda.examples.RestTask1",
+    "description": "A REST API invocation task.",
+    "appliesTo": [
+      "bpmn:ServiceTask"
+    ],
+    "properties": [
+      {
+        "type": "Hidden",
+        "value": "http",
+        "binding": {
+          "type": "zeebe:taskDefinition:type"
+        }
+      },
+      {
+        "label": "REST Endpoint URL",
+        "description": "Specify the url of the REST API to talk to.",
+        "type": "String",
+        "binding": {
+          "type": "zeebe:taskHeader",
+          "key": "url"
+        },
+        "constraints": {
+          "notEmpty": true,
+          "pattern": {
+            "value": "^https?://.*",
+            "message": "Must be http(s) URL."
+          }
+        }
+      },
+      {
+        "label": "REST Method",
+        "description": "Specify the HTTP method to use.",
+        "type": "Dropdown",
+        "value": "get",
+        "choices": [
+          { "name": "GET", "value": "get" },
+          { "name": "POST", "value": "post" },
+          { "name": "PATCH", "value": "patch" },
+          { "name": "DELETE", "value": "delete" }
+        ],
+        "binding": {
+          "type": "zeebe:taskHeader",
+          "key": "method"
+        }
+      },
+      {
+        "label": "Request Body",
+        "description": "Data to send to the endpoint.",
+        "value": "",
+        "type": "String",
+        "optional": true,
+        "binding": {
+          "type": "zeebe:input",
+          "name": "body"
+        }
+      },
+      {
+        "label": "Result Variable",
+        "description": "Name of variable to store the response data in.",
+        "value": "response",
+        "type": "String",
+        "optional": true,
+        "binding": {
+          "type": "zeebe:output",
+          "source": "= body"
+        }
+      }
+    ]
+  },  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "REST Task 2",
+    "id": "io.camunda.examples.RestTask2",
+    "description": "A REST API invocation task.",
+    "appliesTo": [
+      "bpmn:ServiceTask"
+    ],
+    "properties": [
+      {
+        "type": "Hidden",
+        "value": "http",
+        "binding": {
+          "type": "zeebe:taskDefinition:type"
+        }
+      },
+      {
+        "label": "REST Endpoint URL",
+        "description": "Specify the url of the REST API to talk to.",
+        "type": "String",
+        "binding": {
+          "type": "zeebe:taskHeader",
+          "key": "url"
+        },
+        "constraints": {
+          "notEmpty": true,
+          "pattern": {
+            "value": "^https?://.*",
+            "message": "Must be http(s) URL."
+          }
+        }
+      },
+      {
+        "label": "REST Method",
+        "description": "Specify the HTTP method to use.",
+        "type": "Dropdown",
+        "value": "get",
+        "choices": [
+          { "name": "GET", "value": "get" },
+          { "name": "POST", "value": "post" },
+          { "name": "PATCH", "value": "patch" },
+          { "name": "DELETE", "value": "delete" }
+        ],
+        "binding": {
+          "type": "zeebe:taskHeader",
+          "key": "method"
+        }
+      },
+      {
+        "label": "Request Body",
+        "description": "Data to send to the endpoint.",
+        "value": "",
+        "type": "String",
+        "optional": true,
+        "binding": {
+          "type": "zeebe:input",
+          "name": "body"
+        }
+      },
+      {
+        "label": "Result Variable",
+        "description": "Name of variable to store the response data in.",
+        "value": "response",
+        "type": "String",
+        "optional": true,
+        "binding": {
+          "type": "zeebe:output",
+          "source": "= body"
+        }
+      }
+    ]
   },
   {
     "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",

diff --git a/src/element-template-chooser/ElementTemplateChooser.js b/src/element-template-chooser/ElementTemplateChooser.js
@@ -5,6 +5,7 @@ import {
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState
 } from 'preact/hooks';
@@ -91,6 +92,7 @@ function TemplateComponent(props) {
   } = props;
 
   const inputRef = useRef();
+  const resultsRef = useRef();
 
   const [ value, setValue ] = useState('');
 
@@ -124,10 +126,22 @@ function TemplateComponent(props) {
 
 
   // focus input on initial mount
-  useEffect(() => {
+  useLayoutEffect(() => {
     inputRef.current.focus();
   }, []);
 
+  // scroll to keyboard selected result
+  useLayoutEffect(() => {
+
+    const containerEl = resultsRef.current;
+
+    const selectedEl = containerEl.querySelector('.selected');
+
+    if (selectedEl) {
+      selectedEl.scrollIntoViewIfNeeded();
+    }
+  }, [ keyboardSelectedTemplate ]);
+
   useEffect(() => {
     setSelectedTemplate(mouseSelectedTemplate || keyboardSelectedTemplate);
   }, [ keyboardSelectedTemplate, mouseSelectedTemplate ]);
@@ -200,11 +214,11 @@ function TemplateComponent(props) {
         />
       </div>
 
-      <ul class="cmd-change-menu__results">
+      <ul class="cmd-change-menu__results" ref=${ resultsRef }>
         ${templates.map(template => html`
           <li
             key=${template.id}
-            class=${ clsx('cmd-change-menu__entry', { selected: template === keyboardSelectedTemplate }) }
+            class=${ clsx('cmd-change-menu__entry', { selected: !mouseSelectedTemplate && template === keyboardSelectedTemplate }) }
             onMouseEnter=${ () => setMouseSelectedTemplate(template) }
             onMouseLeave=${ () => setMouseSelectedTemplate(null) }
             onClick=${ () => onClose(template) }