Add calculatePosition prop to vue-select in all webapps

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

@@ -34,6 +34,7 @@
             :reduce="f => f.value"
             :filter="functionFilter"
             :placeholder="$t('steps:function.configurator.select-function')"
+            :calculate-position="calculateDropdownPosition"
             @input="functionChanged"
           />
         </b-form-group>
@@ -109,6 +110,7 @@
                   :get-option-key="getOptionParamKey"
                   :filter="argTypeFilter"
                   :clearable="false"
+                  :calculate-position="calculateDropdownPosition"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -130,6 +132,7 @@
                     :reduce="wf => a.type === 'ID' ? wf.workflowID : wf.handle"
                     clearable
                     :placeholder="$t('steps:function.configurator.search-workflow')"
+                    :calculate-position="calculateDropdownPosition"
                     class="bg-white rounded"
                     @input="$root.$emit('change-detected')"
                     @search="searchWorkflows"
@@ -144,6 +147,7 @@
                     :filter="varFilter"
                     :reduce="a => a.value"
                     :placeholder="$t('steps:function.configurator.option-select')"
+                    :calculate-position="calculateDropdownPosition"
                     @input="$root.$emit('change-detected')"
                   />
 

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

@@ -28,6 +28,7 @@
             :reduce="r => r.value"
             :filter="resTypeFilter"
             :placeholder="$t('steps:trigger.configurator.select-resource-type')"
+            :calculate-position="calculateDropdownPosition"
             @input="resourceChanged"
           />
         </b-form-group>
@@ -45,6 +46,7 @@
             :reduce="e => e.eventType"
             :filter="evtTypeFilter"
             :placeholder="$t('steps:trigger.configurator.select-event-type')"
+            :calculate-position="calculateDropdownPosition"
             @input="eventChanged"
           />
         </b-form-group>
@@ -149,6 +151,7 @@
                   :reduce="c => c.value"
                   :filter="constrFilter"
                   :placeholder="$t('steps:trigger.configurator.select-constraint-type')"
+                  :calculate-position="calculateDropdownPosition"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -164,6 +167,7 @@
                   label="text"
                   :reduce="c => c.value"
                   :placeholder="$t('steps:trigger.configurator.select-operator')"
+                  :calculate-position="calculateDropdownPosition"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>

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

@@ -49,6 +49,7 @@
         :get-option-label="getOptionLabel"
         :get-option-key="getOptionKey"
         :value="user.value"
+        :calculate-position="calculateDropdownPosition"
         @search="search"
         @input="updateRunAs"
       />

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

@@ -72,6 +72,7 @@
             :get-option-key="getOptionKey"
             :clearable="false"
             :filter="varFilter"
+            :calculate-position="calculateDropdownPosition"
             @input="$root.$emit('change-detected')"
           />
         </b-form-group>

client/web/workflow/src/mixins/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 
 import toast from './toast'
+import vueSelectPosition from './vue-select-position'
 
 Vue.mixin(toast)
+Vue.mixin(vueSelectPosition)

client/web/workflow/src/mixins/vue-select-position.js

@@ -0,0 +1,48 @@
+import { createPopper } from '@popperjs/core'
+
+export default {
+  methods: {
+    calculateDropdownPosition (dropdownList, component, { width }) {
+      /**
+       * We need to explicitly define the dropdown width since
+       * it is usually inherited from the parent with CSS.
+       */
+      dropdownList.style.width = width
+
+      /**
+       * Here we position the dropdownList relative to the $refs.toggle Element.
+       *
+       * The 'offset' modifier aligns the dropdown so that the $refs.toggle and
+       * the dropdownList overlap by 1 pixel.
+       *
+       * The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
+       * wrapper so that we can set some styles for when the dropdown is placed
+       * above.
+       */
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
+        placement: 'bottom',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, -1],
+            },
+          },
+          {
+            name: 'toggleClass',
+            enabled: true,
+            phase: 'write',
+            fn ({ state }) {
+              component.$el.classList.toggle('drop-up', state.placement === 'top')
+            },
+          }],
+      })
+
+      /**
+       * To prevent memory leaks Popper needs to be destroyed.
+       * If you return function, it will be called just before dropdown is removed from DOM.
+       */
+      return () => popper.destroy()
+    },
+  },
+}