Fix workflow expression editor losing focus

client/web/workflow/src/components/Configurator/Expressions.vue

@@ -116,7 +116,7 @@ export default {
         {
           key: 'target',
           label: this.$t('steps:expressions.configurator.target'),
-          thClass: 'pl-3',
+          thClass: 'pl-4 ml-1',
           formatter: (item) => {
             return `${item.target}(${item.type})`
           },
@@ -124,7 +124,7 @@ export default {
         {
           key: 'expr',
           label: this.$t('steps:expressions.configurator.expression'),
-          thClass: 'mr-3',
+          thClass: 'pl-1 mr-3',
         },
       ]
     },

client/web/workflow/src/components/ExpressionTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="table-responsive">
-    <b-row class="header pl-3">
+    <b-row class="header pl-4">
       <b-col
         v-for="(field, index) in fields"
         :key="index"
@@ -12,6 +12,7 @@
 
     <draggable
       :list="items"
+      handle=".grab"
       @end="$root.$emit('change-detected')"
     >
       <div
@@ -23,6 +24,13 @@
           no-gutters
           @click="$set(item, '_showDetails', !item._showDetails)"
         >
+          <div class="p-2 grab">
+            <font-awesome-icon
+              :icon="['fas', 'bars']"
+              class="text-light"
+            />
+          </div>
+
           <b-col
             v-for="(field, i) in fields"
             :key="i"
@@ -185,5 +193,9 @@ export default {
 
 .expr-item:hover {
   background-color: #F3F3F5;
+
+  .grab > * {
+    color: $secondary !important;
+  }
 }
 </style>

client/web/workflow/src/components/faIcons.js

@@ -23,6 +23,7 @@ import {
   faAngleRight,
   faAngleLeft,
   faEllipsisV,
+  faBars,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -60,4 +61,5 @@ library.add(
   faAngleRight,
   faAngleLeft,
   faEllipsisV,
+  faBars,
 )