Add calculatePosition prop to vue-select in all webapps

client/web/admin/src/components/Apigw/CFilterParams.vue

@@ -39,6 +39,7 @@
             :get-option-key="getOptionKey"
             :reduce="wf => wf.workflowID"
             :placeholder="$t('filters.placeholders.workflow')"
+            :calculate-position="calculateDropdownPosition"
             class="bg-white"
           />
 

client/web/admin/src/components/Authclient/CSelectUser.vue

@@ -5,6 +5,7 @@
     :get-option-label="getOptionLabel"
     :get-option-key="getOptionKey"
     :value="user.value"
+    :calculate-position="calculateDropdownPosition"
     class="bg-white"
     @search="search"
     @input="updateRunAs"

client/web/admin/src/components/Permissions/CPermissionClone.vue

@@ -36,6 +36,7 @@
           :loading="processingRoles"
           multiple
           :placeholder="$t('ui.clone.pick-role')"
+          :calculate-position="calculateDropdownPosition"
           class="bg-white"
         />
       </b-form-group>

client/web/admin/src/components/Permissions/CPermissionList.vue

@@ -232,6 +232,7 @@
           clearable
           :disabled="add.mode === 'eval' && !!add.userID"
           :placeholder="$t('ui.add.role.placeholder')"
+          :calculate-position="calculateDropdownPosition"
           class="bg-white"
         />
       </b-form-group>
@@ -253,6 +254,7 @@
           label="name"
           clearable
           :placeholder="$t('ui.add.user.placeholder')"
+          :calculate-position="calculateDropdownPosition"
           class="bg-white"
           @search="searchUsers"
         />

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

@@ -3,8 +3,11 @@ import Vue from 'vue'
 import resourceTranslations from './resource-translations'
 
 import toast from './toast'
+import vueSelectPosition from './vue-select-position'
+
 import './eventbus'
 
 Vue.mixin(resourceTranslations)
 
 Vue.mixin(toast)
+Vue.mixin(vueSelectPosition)

client/web/admin/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()
+    },
+  },
+}