From be5ff4d095c982f01fb2079c32c99f6bea3cc321 Mon Sep 17 00:00:00 2001
From: Emmy Leke <emmy.leke@planetcrust.com>
Date: Mon, 31 Jul 2023 13:54:34 +0100
Subject: [PATCH] Replace some select components with CInputSelect

---
 client/web/admin/package.json                 |   3 +-
 .../src/components/Apigw/CFilterParams.vue    |  12 +-
 .../src/components/Authclient/CSelectUser.vue |   9 +-
 .../web/admin/src/components/CRolePicker.vue  |   9 +-
 .../Permissions/CPermissionClone.vue          |  10 +-
 .../Permissions/CPermissionList.vue           |  15 +-
 .../components/Role/CRoleEditorMembers.vue    |   9 +-
 client/web/admin/src/components/index.js      |   4 +-
 client/web/admin/src/mixins/index.js          |   2 -
 .../admin/src/mixins/vue-select-position.js   |  48 ----
 .../admin/src/themes/corteza-base/custom.scss |   1 -
 .../admin/src/themes/corteza-base/index.scss  |   3 +-
 client/web/admin/yarn.lock                    |   5 -
 client/web/compose/package.json               |   1 -
 .../Admin/Module/DalFieldStoreEncoding.vue    |   5 +-
 .../components/Admin/Module/DalSettings.vue   |   6 +-
 .../components/Admin/Module/FieldRowEdit.vue  |  36 +--
 .../components/Admin/Module/UniqueValues.vue  |  16 +-
 .../Admin/Page/Builder/Selector.vue           |  11 +-
 .../components/Chart/Report/GenericChart.vue  |  18 +-
 .../components/Chart/Report/ReportEdit.vue    |  97 +++-----
 .../components/Common/RecordListFilter.vue    |  12 +-
 .../ModuleFields/Configurator/Record.vue      |  12 +-
 .../ModuleFields/Configurator/User.vue        |  12 +-
 .../components/ModuleFields/Editor/Record.vue |  37 +--
 .../components/ModuleFields/Editor/Select.vue |  52 ++--
 .../components/ModuleFields/Editor/User.vue   |  36 +--
 .../components/ModuleFields/Editor/base.vue   |   5 -
 .../Namespaces/NamespaceSidebar.vue           |  25 +-
 .../components/Namespaces/Reminders/Edit.vue  |   6 +-
 .../FeedSource/configs/Record.vue             |  40 ++-
 .../PageBlocks/ChartConfigurator.vue          |  39 ++-
 .../PageBlocks/CommentConfigurator.vue        |  15 +-
 .../components/PageBlocks/Configurator.vue    |   4 +-
 .../FeedSource/configs/Record.vue             |  32 +--
 .../PageBlocks/IFrameConfigurator.vue         |   2 -
 .../PageBlocks/MetricConfigurator/index.vue   |  31 +--
 .../PageBlocks/Navigation/Configurator.vue    |  10 +
 .../Navigation/NavTypes/ComposePage.vue       |  16 +-
 .../PageBlocks/Nylas/NylasConfigurator.vue    |  35 ++-
 .../PageBlocks/ProgressConfigurator.vue       |  46 ++--
 .../PageBlocks/RecordConfigurator.vue         |  23 +-
 .../PageBlocks/RecordListConfigurator.vue     |  13 +-
 .../RecordOrganizerConfigurator.vue           |  81 ++++---
 .../PageBlocks/Report/Configurator.vue        |  95 ++++----
 .../PageBlocks/SocialFeedConfigurator.vue     |   1 +
 .../PageBlocks/TabsConfigurator.vue           |  11 +-
 .../Public/Record/BulkEdit/index.vue          |   7 +-
 .../Public/Record/Exporter/index.vue          |   6 +-
 client/web/compose/src/components/index.js    |   1 +
 client/web/compose/src/mixins/index.js        |   2 -
 .../compose/src/mixins/vue-select-position.js |  48 ----
 .../src/themes/corteza-base/custom.scss       |  62 -----
 .../src/themes/corteza-base/index.scss        |   1 -
 .../compose/src/views/Admin/Charts/Edit.vue   |   9 +-
 .../compose/src/views/Admin/Modules/Edit.vue  |   2 +-
 .../compose/src/views/Admin/Pages/Builder.vue |   8 +-
 .../compose/src/views/Admin/Pages/Edit.vue    |   6 +-
 client/web/compose/yarn.lock                  |   5 -
 .../components/Requests/Editor/Correct.vue    |   6 +-
 .../src/components/Requests/Editor/Delete.vue |   6 +-
 client/web/privacy/src/components/index.js    |   1 +
 client/web/privacy/src/mixins/index.js        |   2 -
 .../privacy/src/mixins/vue-select-position.js |  48 ----
 .../src/themes/corteza-base/index.scss        |   1 -
 .../Privacy/DataOverview/Application.vue      |  24 +-
 client/web/privacy/yarn.lock                  |   5 -
 client/web/reporter/package.json              |   1 -
 .../src/components/Common/ColumnSelector.vue  |   9 +-
 .../DisplayElements/Configurators/Chart.vue   |  14 +-
 .../components/Report/Datasources/Join.vue    |   2 +
 client/web/reporter/src/components/index.js   |   2 +
 client/web/reporter/src/mixins/index.js       |   2 -
 .../src/mixins/vue-select-position.js         |  48 ----
 .../src/themes/corteza-base/index.scss        |   1 -
 .../web/reporter/src/views/Report/Builder.vue |   6 +-
 client/web/reporter/src/views/Report/View.vue |   7 +-
 client/web/reporter/yarn.lock                 |   5 -
 client/web/workflow/package.json              |   1 -
 .../src/components/Configurator/Function.vue  |  19 +-
 .../src/components/Configurator/Trigger.vue   |  18 +-
 .../src/components/Configurator/Workflow.vue  |  11 +-
 .../src/components/ExpressionTable.vue        |   6 +-
 client/web/workflow/src/components/index.js   |   1 +
 client/web/workflow/src/mixins/index.js       |   2 -
 .../src/mixins/vue-select-position.js         |  48 ----
 .../src/themes/corteza-base/index.scss        |   1 -
 client/web/workflow/yarn.lock                 |   5 -
 lib/vue/package.json                          |   2 +-
 lib/vue/src/components/index.ts               |   1 +
 .../src/components/input/CInputPresort.vue    |  19 +-
 lib/vue/src/components/input/CInputSelect.vue | 228 ++++++++++++++++++
 lib/vue/src/components/input/index.ts         |   3 +-
 .../permissions/CPermissionsModal.vue         |  53 ++--
 .../privacy/CSensitivityLevelPicker.vue       |  13 +-
 .../kinds/CPromptComposeRecordPicker.vue      |  10 +-
 lib/vue/yarn.lock                             |   8 +-
 97 files changed, 712 insertions(+), 1095 deletions(-)
 delete mode 100644 client/web/admin/src/mixins/vue-select-position.js
 delete mode 100644 client/web/compose/src/mixins/vue-select-position.js
 delete mode 100644 client/web/privacy/src/mixins/vue-select-position.js
 delete mode 100644 client/web/reporter/src/mixins/vue-select-position.js
 delete mode 100644 client/web/workflow/src/mixins/vue-select-position.js
 create mode 100644 lib/vue/src/components/input/CInputSelect.vue

diff --git a/client/web/admin/package.json b/client/web/admin/package.json
index 8f019ebc8..ef4638280 100644
--- a/client/web/admin/package.json
+++ b/client/web/admin/package.json
@@ -27,9 +27,9 @@
     "acorn": "^6.4.1",
     "axios": "0.21.2",
     "bootstrap-vue": "^2.21.2",
-    "echarts": "^5.3.3",
     "brace": "^0.11.1",
     "copy-to-clipboard": "^3.3.1",
+    "echarts": "^5.3.3",
     "flush-promises": "^1.0.2",
     "fstream": "^1.0.12",
     "kind-of": "^6.0.3",
@@ -51,7 +51,6 @@
     "vue-echarts": "^6.2.3",
     "vue-native-websocket": "^2.0.15",
     "vue-router": "3.1.5",
-    "vue-select": "3.4.0",
     "vue2-brace-editor": "^2.0.2",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.23.2",
diff --git a/client/web/admin/src/components/Apigw/CFilterParams.vue b/client/web/admin/src/components/Apigw/CFilterParams.vue
index b58016f95..e13e5534f 100644
--- a/client/web/admin/src/components/Apigw/CFilterParams.vue
+++ b/client/web/admin/src/components/Apigw/CFilterParams.vue
@@ -27,15 +27,13 @@
         v-model="param.value"
       />
 
-      <vue-select
+      <c-input-select
         v-else-if="param.label === 'workflow'"
         v-model="param.value"
         :options="workflows"
         :get-option-key="getOptionKey"
         :reduce="wf => wf.workflowID"
         :placeholder="$t('filters.placeholders.workflow')"
-        :calculate-position="calculateDropdownPosition"
-        class="bg-white rounded"
       />
 
       <b-form-select
@@ -112,6 +110,7 @@
           v-model="param.value"
           max-rows="6"
         />
+
         <b-input-group v-else>
           <b-input-group-prepend
             v-if="param.label === 'expr'"
@@ -120,6 +119,7 @@
               ƒ
             </b-button>
           </b-input-group-prepend>
+
           <b-form-input
             v-if="param.label === 'expr'"
             v-model="param.value"
@@ -136,13 +136,7 @@
 </template>
 
 <script>
-import { VueSelect } from 'vue-select'
-
 export default {
-  components: {
-    VueSelect,
-  },
-
   props: {
     filter: {
       type: Object,
diff --git a/client/web/admin/src/components/Authclient/CSelectUser.vue b/client/web/admin/src/components/Authclient/CSelectUser.vue
index 7b6944f62..9adc115e4 100644
--- a/client/web/admin/src/components/Authclient/CSelectUser.vue
+++ b/client/web/admin/src/components/Authclient/CSelectUser.vue
@@ -1,12 +1,10 @@
 <template>
-  <vue-select
+  <c-input-select
     data-test-id="select-user"
     :options="user.options"
     :get-option-label="getOptionLabel"
     :get-option-key="getOptionKey"
     :value="user.value"
-    :calculate-position="calculateDropdownPosition"
-    class="bg-white rounded"
     @search="search"
     @input="updateRunAs"
   />
@@ -14,13 +12,8 @@
 
 <script>
 import { debounce } from 'lodash'
-import { VueSelect } from 'vue-select'
 
 export default {
-  components: {
-    VueSelect,
-  },
-
   props: {
     userID: {
       type: String,
diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
index 84696212d..4ba7ad6fc 100644
--- a/client/web/admin/src/components/CRolePicker.vue
+++ b/client/web/admin/src/components/CRolePicker.vue
@@ -2,15 +2,13 @@
   <div
     data-test-id="role-picker"
   >
-    <vue-select
+    <c-input-select
       ref="picker"
       data-test-id="input-role-picker"
       :options="filtered"
       :get-option-key="r => r.value"
       :get-option-label="r => getRoleLabel(r)"
-      :calculate-position="calculateDropdownPosition"
       :placeholder="$t('admin:picker.role.placeholder')"
-      class="bg-white w-100 rounded"
       multiple
       @search="search"
       @input="updateValue($event)"
@@ -45,17 +43,12 @@
 
 <script>
 import { debounce } from 'lodash'
-import { VueSelect } from 'vue-select'
 
 function roleSorter (a, b) {
   return `${a.name} ${a.handle} ${a.roleID}`.localeCompare(`${b.name} ${b.handle} ${b.roleID}`)
 }
 
 export default {
-  components: {
-    VueSelect,
-  },
-
   props: {
     label: {
       type: String,
diff --git a/client/web/admin/src/components/Permissions/CPermissionClone.vue b/client/web/admin/src/components/Permissions/CPermissionClone.vue
index cb00b8440..44ba6285f 100644
--- a/client/web/admin/src/components/Permissions/CPermissionClone.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionClone.vue
@@ -26,7 +26,7 @@
         :description="$t('ui.clone.description')"
         class="mb-0"
       >
-        <vue-select
+        <c-input-select
           v-model="selectedRoles"
           data-test-id="select-role-list"
           label="name"
@@ -36,8 +36,6 @@
           :loading="processingRoles"
           multiple
           :placeholder="$t('ui.clone.pick-role')"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
         />
       </b-form-group>
     </b-modal>
@@ -45,17 +43,11 @@
 </template>
 
 <script>
-import VueSelect from 'vue-select'
-
 export default {
   i18nOptions: {
     namespaces: 'permissions',
   },
 
-  components: {
-    VueSelect,
-  },
-
   props: {
     roleId: {
       type: String,
diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
index fb1a13f07..1c39aa64c 100644
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -219,7 +219,7 @@
         label-class="text-primary"
         class="mb-0"
       >
-        <vue-select
+        <c-input-select
           key="roleID"
           v-model="add.roleID"
           :data-test-id="`select-${add.mode}-roles`"
@@ -227,11 +227,8 @@
           :get-option-key="getOptionRoleKey"
           :multiple="add.mode === 'eval'"
           label="name"
-          clearable
           :disabled="add.mode === 'eval' && !!add.userID"
           :placeholder="$t('ui.add.role.placeholder')"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
         />
       </b-form-group>
 
@@ -241,7 +238,7 @@
         label-class="text-primary"
         class="mt-3 mb-0"
       >
-        <vue-select
+        <c-input-select
           key="userID"
           v-model="add.userID"
           :data-test-id="`select-${add.mode}-users`"
@@ -250,10 +247,7 @@
           :options="userOptions"
           :get-option-label="getUserLabel"
           label="name"
-          clearable
           :placeholder="$t('ui.add.user.placeholder')"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
           @search="searchUsers"
         />
       </b-form-group>
@@ -262,7 +256,6 @@
 </template>
 
 <script>
-import { VueSelect } from 'vue-select'
 import _ from 'lodash'
 
 export default {
@@ -270,10 +263,6 @@ export default {
     namespaces: 'permissions',
   },
 
-  components: {
-    VueSelect,
-  },
-
   props: {
     roles: {
       type: Array,
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index 2a1ba26f2..a1dfdf7e0 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -14,15 +14,13 @@
         label-class="text-primary"
         class="mb-0"
       >
-        <vue-select
+        <c-input-select
           ref="picker"
           data-test-id="input-role-members"
           :options="options"
           :get-option-key="u => u.value"
           :get-option-label="u => getUserLabel(u)"
-          :calculate-position="calculateDropdownPosition"
           :placeholder="$t('admin:picker.member.placeholder')"
-          class="bg-white w-100 rounded"
           multiple
           @search="search"
           @input="updateValue($event)"
@@ -70,7 +68,6 @@
 
 <script>
 import { debounce } from 'lodash'
-import { VueSelect } from 'vue-select'
 
 export default {
   i18nOptions: {
@@ -78,10 +75,6 @@ export default {
     keyPrefix: 'editor.members',
   },
 
-  components: {
-    VueSelect,
-  },
-
   props: {
     currentMembers: {
       type: Array,
diff --git a/client/web/admin/src/components/index.js b/client/web/admin/src/components/index.js
index b29539ec3..3557ca4bc 100644
--- a/client/web/admin/src/components/index.js
+++ b/client/web/admin/src/components/index.js
@@ -22,7 +22,7 @@ import {
   TooltipComponent,
 } from 'echarts/components'
 
-const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox } = components
+const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect } = components
 
 Vue.use(PortalVue)
 Vue.component('c-corredor-manual-buttons', CCorredorManualButtons)
@@ -34,6 +34,8 @@ Vue.component('c-input-confirm', CInputConfirm)
 Vue.component('c-button-submit', CButtonSubmit)
 Vue.component('c-input-checkbox', CInputCheckbox)
 Vue.component('c-system-fields', CSystemFields)
+Vue.component('c-input-select', CInputSelect)
+
 use([
   LineChart,
   SVGRenderer,
diff --git a/client/web/admin/src/mixins/index.js b/client/web/admin/src/mixins/index.js
index 66d3ade33..2515bf9d6 100644
--- a/client/web/admin/src/mixins/index.js
+++ b/client/web/admin/src/mixins/index.js
@@ -3,11 +3,9 @@ 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)
diff --git a/client/web/admin/src/mixins/vue-select-position.js b/client/web/admin/src/mixins/vue-select-position.js
deleted file mode 100644
index 4973cffd7..000000000
--- a/client/web/admin/src/mixins/vue-select-position.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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()
-    },
-  },
-}
diff --git a/client/web/admin/src/themes/corteza-base/custom.scss b/client/web/admin/src/themes/corteza-base/custom.scss
index 56c391bcb..24f3f52dc 100644
--- a/client/web/admin/src/themes/corteza-base/custom.scss
+++ b/client/web/admin/src/themes/corteza-base/custom.scss
@@ -76,7 +76,6 @@ th {
 .b-table-sticky-header > .table.b-table > thead > tr > th {
   border: 0;
 }
-
 .v-select {
   min-width: auto;
   position: relative;
diff --git a/client/web/admin/src/themes/corteza-base/index.scss b/client/web/admin/src/themes/corteza-base/index.scss
index 5f38f6f63..103df6df8 100644
--- a/client/web/admin/src/themes/corteza-base/index.scss
+++ b/client/web/admin/src/themes/corteza-base/index.scss
@@ -1,4 +1,3 @@
 @import "./rtl.scss";
-@import "~vue-select/dist/vue-select.css";
 @import "custom";
-@import "./poppins.scss";
\ No newline at end of file
+@import "./poppins.scss";
diff --git a/client/web/admin/yarn.lock b/client/web/admin/yarn.lock
index dfb9376a1..22aa375e2 100644
--- a/client/web/admin/yarn.lock
+++ b/client/web/admin/yarn.lock
@@ -10822,11 +10822,6 @@ vue-router@3.1.5:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
   integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
 
-vue-select@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.4.0.tgz#e56b0612845d13d10162cd8df81bfb46af2083ac"
-  integrity sha512-UHd0fiUjPgRmHIGhI6yUKtnJsHOdvzD00QUGUtD+FaxWWZRWF2AAb7KPZRj0j/egVfZQvey6M6woHn78GbTogA==
-
 vue-select@^3.4.0:
   version "3.18.3"
   resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.18.3.tgz#31f188d7181a4a86d07b937303c457efe863c4bc"
diff --git a/client/web/compose/package.json b/client/web/compose/package.json
index ace620344..079dcedaa 100644
--- a/client/web/compose/package.json
+++ b/client/web/compose/package.json
@@ -82,7 +82,6 @@
     "vue-grid-layout": "^2.3.3",
     "vue-native-websocket": "^2.0.14",
     "vue-router": "3.1.5",
-    "vue-select": "^3.1.0",
     "vue-sortable-tree": "^1.2.2",
     "vue-tweet-embed": "^2.3.0",
     "vue2-brace-editor": "^2.0.2",
diff --git a/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue b/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue
index 73ec2a186..665b4422e 100644
--- a/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue
+++ b/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue
@@ -33,12 +33,13 @@
     <b-col
       cols="3"
     >
-      <b-form-select
+      <c-input-select
         v-show="strategy !== 'omit'"
         v-model="strategy"
         :options="strategies"
         :disabled="!use"
-        size="sm"
+        label="text"
+        :reduce="strategy => strategy.value"
       />
     </b-col>
 
diff --git a/client/web/compose/src/components/Admin/Module/DalSettings.vue b/client/web/compose/src/components/Admin/Module/DalSettings.vue
index d1b5bdc06..560e82468 100644
--- a/client/web/compose/src/components/Admin/Module/DalSettings.vue
+++ b/client/web/compose/src/components/Admin/Module/DalSettings.vue
@@ -7,7 +7,7 @@
       :description="$t('connection.description')"
       label-class="text-primary"
     >
-      <vue-select
+      <c-input-select
         v-model="module.config.dal.connectionID"
         :options="connections"
         :get-option-key="getOptionKey"
@@ -16,8 +16,6 @@
         :reduce="s => s.connectionID"
         :placeholder="$t('connection.placeholder')"
         :get-option-label="getConnectionLabel"
-        :calculate-position="calculateDropdownPosition"
-        class="bg-white rounded"
       />
     </b-form-group>
 
@@ -87,7 +85,6 @@
 <script>
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { moduleFieldStrategyConfig, systemFieldStrategyConfig, types } from './encoding-strategy'
-import VueSelect from 'vue-select'
 import DalFieldStoreEncoding from 'corteza-webapp-compose/src/components/Admin/Module/DalFieldStoreEncoding'
 
 const PrimaryConnType = 'corteza::system:primary-dal-connection'
@@ -99,7 +96,6 @@ export default {
   },
 
   components: {
-    VueSelect,
     DalFieldStoreEncoding,
   },
 
diff --git a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
index 358e7c3d8..a413eb8ef 100644
--- a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
@@ -9,8 +9,9 @@
         class="text-light grab"
       />
     </td>
+
     <td
-      style="width: 25%;"
+      style="min-width: 250px;"
     >
       <b-form-input
         v-model="value.name"
@@ -18,16 +19,18 @@
         :readonly="disabled"
         :state="nameState"
         type="text"
-        class="form-control"
       />
     </td>
-    <td>
+
+    <td
+      style="min-width: 250px;"
+    >
       <b-input-group>
         <b-form-input
           v-model="value.label"
           type="text"
-          class="form-control"
         />
+
         <b-input-group-append>
           <field-translator
             :field.sync="value"
@@ -38,21 +41,20 @@
         </b-input-group-append>
       </b-input-group>
     </td>
-    <td>
+
+    <td
+      style="min-width: 250px;"
+    >
       <b-input-group class="field-type">
-        <b-select
+        <c-input-select
           v-model="value.kind"
+          :options="fieldKinds"
+          :reduce="kind => kind.kind"
           :disabled="disabled"
-          @change="$emit('updateKind')"
-        >
-          <option
-            v-for="({ kind, label }) in fieldKinds"
-            :key="kind"
-            :value="kind"
-          >
-            {{ label }}
-          </option>
-        </b-select>
+          :clearable="false"
+          @input="$emit('updateKind')"
+        />
+
         <b-input-group-append>
           <b-button
             v-b-tooltip.hover="{ title: $t('tooltip.field'), container: '#body' }"
@@ -67,8 +69,10 @@
         </b-input-group-append>
       </b-input-group>
     </td>
+
     <td />
     <td />
+
     <td
       class="align-middle text-center"
     >
diff --git a/client/web/compose/src/components/Admin/Module/UniqueValues.vue b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
index 82e496133..342527dd3 100644
--- a/client/web/compose/src/components/Admin/Module/UniqueValues.vue
+++ b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -24,14 +24,13 @@
       <div class="d-flex align-items-center justify-content-between flex-wrap w-100">
         <b-form-group>
           <b-input-group>
-            <vue-select
+            <c-input-select
               v-model="rule.currentField"
               :placeholder="$t('searchFields')"
               :get-option-label="getOptionLabel"
               :get-option-key="getOptionKey"
               :options="filterFieldOptions(rule)"
-              :calculate-position="calculateDropdownPosition"
-              class="bg-white rounded"
+              :reduce="o => o.name"
               style="min-width: 300px;"
             />
 
@@ -92,7 +91,9 @@
               :key="`constraint-${consIndex}`"
             >
               <td>{{ getOptionLabel(getField(constraint.attribute)) }}</td>
+
               <td>{{ getField(constraint.attribute).kind }}</td>
+
               <td>
                 <b-form-select
                   v-model="constraint.modifier"
@@ -100,6 +101,7 @@
                   size="sm"
                 />
               </td>
+
               <td>
                 <b-form-select
                   v-model="constraint.multiValue"
@@ -108,6 +110,7 @@
                   size="sm"
                 />
               </td>
+
               <td class="text-right p-0 px-4 align-middle">
                 <c-input-confirm
                   show-icon
@@ -141,7 +144,6 @@
 
 <script>
 import { compose } from '@cortezaproject/corteza-js'
-import { VueSelect } from 'vue-select'
 
 export default {
   i18nOptions: {
@@ -149,10 +151,6 @@ export default {
     keyPrefix: 'edit.config.uniqueValues',
   },
 
-  components: {
-    VueSelect,
-  },
-
   props: {
     module: {
       type: compose.Module,
@@ -206,6 +204,8 @@ export default {
     },
 
     updateRuleConstraint (rule) {
+      rule.currentField = this.module.fields.find(({ name }) => name === rule.currentField)
+
       if (!rule.constraints) {
         rule.constraints = []
       }
diff --git a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
index 074d0f06a..5a9b04521 100644
--- a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
+++ b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
@@ -42,15 +42,12 @@
         cols="12"
       >
         <b-input-group class="d-flex w-100">
-          <vue-select
+          <c-input-select
             v-model="selectedExistingBlock"
             :get-option-label="getBlockLabel"
             :get-option-key="b => b.blockID"
             :options="existingBlocks"
-            :calculate-position="calculateDropdownPosition"
             :placeholder="$t('selector.selectableBlocks.placeholder')"
-            append-to-body
-            class="bg-white rounded"
           />
 
           <b-input-group-append>
@@ -65,6 +62,7 @@
                 :icon="['far', 'clone']"
               />
             </b-button>
+
             <b-button
               v-b-tooltip.hover="{ title: $t('selector.tooltip.clone.ref'), container: '#body' }"
               variant="light"
@@ -85,7 +83,6 @@
 
 <script>
 import * as images from '../../../../assets/PageBlocks'
-import { VueSelect } from 'vue-select'
 import { compose } from '@cortezaproject/corteza-js'
 
 export default {
@@ -93,10 +90,6 @@ export default {
     namespaces: 'block',
   },
 
-  components: {
-    VueSelect,
-  },
-
   props: {
     recordPage: {
       type: Boolean,
diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index f4e1f6cf0..590e65101 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -203,19 +203,15 @@
             :label="$t('edit.metric.output.label')"
             label-class="text-primary"
           >
-            <b-form-select
+            <c-input-select
               v-model="metric.type"
               :options="chartTypes"
-              @input="chartTypeChanged(metric)"
-            >
-              <template slot="first">
-                <option
-                  :value="undefined"
-                >
-                  {{ $t('edit.metric.output.placeholder') }}
-                </option>
-              </template>
-            </b-form-select>
+              label="text"
+              :reduce="option => option.value"
+              :get-option-key="option => option.text"
+              :placeholder="$t('edit.metric.output.placeholder')"
+              @input="value => chartTypeChanged(metric)"
+            />
           </b-form-group>
         </b-col>
 
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index 5848d9d8d..a4263cd6e 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -17,20 +17,14 @@
             :label="$t('edit.module.label')"
             label-class="text-primary"
           >
-            <b-form-select
+            <c-input-select
               v-model="moduleID"
               :options="modules"
-              text-field="name"
-              value-field="moduleID"
-            >
-              <template slot="first">
-                <option
-                  :value="undefined"
-                >
-                  {{ $t('edit.module.placeholder') }}
-                </option>
-              </template>
-            </b-form-select>
+              label="name"
+              :reduce="module => module.moduleID"
+              :get-option-key="option => option.moduleID"
+              :placeholder="$t('edit.module.placeholder')"
+            />
           </b-form-group>
         </b-col>
 
@@ -43,16 +37,13 @@
             :label="$t('edit.filter.preset')"
             label-class="text-primary"
           >
-            <b-form-select
+            <c-input-select
               v-model="report.filter"
               :options="predefinedFilters"
-            >
-              <template slot="first">
-                <b-form-select-option :value="defaultFilterOption">
-                  {{ $t('edit.filter.noFilter') }}
-                </b-form-select-option>
-              </template>
-            </b-form-select>
+              label="text"
+              :reduce="filter => filter.value"
+              :placeholder="$t('edit.filter.noFilter')"
+            />
           </b-form-group>
         </b-col>
 
@@ -110,19 +101,14 @@
                 :label="$t('edit.dimension.fieldLabel')"
                 label-class="text-primary"
               >
-                <b-form-select
+                <c-input-select
                   v-model="d.field"
                   :options="dimensionFields"
-                  @change="onDimFieldChange($event, d)"
-                >
-                  <template slot="first">
-                    <option
-                      :value="undefined"
-                    >
-                      {{ $t('edit.dimension.fieldPlaceholder') }}
-                    </option>
-                  </template>
-                </b-form-select>
+                  label="text"
+                  :reduce="field => field.value"
+                  :placeholder="$t('edit.dimension.fieldPlaceholder')"
+                  @input="value => onDimFieldChange(value, d)"
+                />
               </b-form-group>
             </b-col>
 
@@ -134,20 +120,15 @@
                 :label="$t('edit.dimension.function.label')"
                 label-class="text-primary"
               >
-                <b-form-select
+                <c-input-select
                   v-model="d.modifier"
                   :disabled="!d.field || !isTemporalField(d.field)"
                   :options="dimensionModifiers"
+                  label="text"
+                  :reduce="modifier => modifier.value"
+                  :placeholder="$t('edit.dimension.function.placeholder')"
                   @change="onDimModifierChange($event, d)"
-                >
-                  <template slot="first">
-                    <option
-                      :value="undefined"
-                    >
-                      {{ $t('edit.dimension.function.placeholder') }}
-                    </option>
-                  </template>
-                </b-form-select>
+                />
               </b-form-group>
             </b-col>
           </b-row>
@@ -268,19 +249,14 @@
                 :label="$t('edit.metric.fieldLabel')"
                 label-class="text-primary"
               >
-                <b-form-select
+                <c-input-select
                   v-model="m.field"
                   :options="metricFields"
-                  @change="onMetricFieldChange($event, m)"
-                >
-                  <template slot="first">
-                    <option
-                      :value="undefined"
-                    >
-                      {{ $t('edit.metric.fieldPlaceholder') }}
-                    </option>
-                  </template>
-                </b-form-select>
+                  :get-option-key="option => option.text"
+                  label="text"
+                  :reduce="option => option.value"
+                  @input="value => onMetricFieldChange(value, m)"
+                />
               </b-form-group>
             </b-col>
 
@@ -292,19 +268,16 @@
                 :label="$t('edit.metric.function.label')"
                 label-class="text-primary"
               >
-                <b-form-select
+                <c-input-select
                   v-model="m.aggregate"
                   :disabled="!m.field || m.field === 'count'"
                   :options="metricAggregates"
-                >
-                  <template slot="first">
-                    <option
-                      :value="undefined"
-                    >
-                      {{ $t('edit.metric.function.placeholder') }}
-                    </option>
-                  </template>
-                </b-form-select>
+                  label="text"
+                  :reduce="option => option.value"
+                  :get-option-key="option => option.text"
+                  :placeholder="$t('edit.metric.function.placeholder')"
+                  @input="value => onMetricFieldChange(value, m)"
+                />
               </b-form-group>
             </b-col>
           </b-row>
diff --git a/client/web/compose/src/components/Common/RecordListFilter.vue b/client/web/compose/src/components/Common/RecordListFilter.vue
index 95924db9d..acf9753ef 100644
--- a/client/web/compose/src/components/Common/RecordListFilter.vue
+++ b/client/web/compose/src/components/Common/RecordListFilter.vue
@@ -58,31 +58,29 @@
                     >
                       {{ $t('recordList.filter.where') }}
                     </h6>
+
                     <b-form-select
                       v-else
                       v-model="filter.condition"
                       :options="conditions"
                     />
                   </b-td>
+
                   <b-td
                     class="px-2"
                   >
-                    <vue-select
+                    <c-input-select
                       v-model="filter.name"
                       :options="fieldOptions"
                       :get-option-key="getOptionKey"
                       :clearable="false"
                       :placeholder="$t('recordList.filter.fieldPlaceholder')"
-                      option-value="name"
-                      option-text="label"
                       :reduce="f => f.name"
-                      append-to-body
-                      :calculate-position="calculateDropdownPosition"
                       :class="{ 'filter-field-picker': !!filter.name }"
-                      class="field-selector bg-white rounded"
                       @input="onChange($event, groupIndex, index)"
                     />
                   </b-td>
+
                   <b-td
                     v-if="getField(filter.name)"
                     :class="{ 'pr-2': getField(filter.name) }"
@@ -250,7 +248,6 @@
 <script>
 import FieldEditor from '../ModuleFields/Editor'
 import { compose, validator } from '@cortezaproject/corteza-js'
-import { VueSelect } from 'vue-select'
 
 export default {
   i18nOptions: {
@@ -259,7 +256,6 @@ export default {
 
   components: {
     FieldEditor,
-    VueSelect,
   },
 
   props: {
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Record.vue b/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
index 685edd3b0..8cc135e93 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
@@ -4,11 +4,11 @@
       :label="$t('kind.record.moduleLabel')"
       label-class="text-primary"
     >
-      <b-form-select
+      <c-input-select
         v-model="f.options.moduleID"
         :options="moduleOptions"
-        text-field="name"
-        value-field="moduleID"
+        label="name"
+        :reduce="module => module.moduleID"
       />
     </b-form-group>
 
@@ -24,9 +24,11 @@
           />
         </template>
 
-        <b-form-select
+        <c-input-select
           v-model="f.options.labelField"
           :options="fieldOptions"
+          label="text"
+          :reduce="field => field.value"
         />
       </b-form-group>
 
@@ -51,7 +53,6 @@
       >
         <b-form-select
           v-model="f.options.queryFields"
-          class="form-control"
           :options="queryFieldOptions"
           multiple
         />
@@ -63,7 +64,6 @@
       >
         <b-form-textarea
           v-model="f.options.prefilter"
-          class="form-control"
           :placeholder="$t('kind.record.prefilterPlaceholder')"
         />
         <b-form-text>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/User.vue b/client/web/compose/src/components/ModuleFields/Configurator/User.vue
index f99648477..98152e9ec 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/User.vue
@@ -11,20 +11,15 @@
       :label="$t('kind.user.roles.label')"
       label-class="text-primary"
     >
-      <vue-select
+      <c-input-select
         v-model="f.options.roles"
         :options="roleOptions"
         :get-option-key="getOptionKey"
         :reduce="role => role.roleID"
-        option-value="roleID"
-        option-text="name"
         :close-on-select="false"
-        append-to-body
         :placeholder="$t('kind.user.roles.placeholder')"
-        :calculate-position="calculateDropdownPosition"
         multiple
         label="name"
-        class="bg-white rounded"
       />
     </b-form-group>
 
@@ -58,17 +53,12 @@
 
 <script>
 import base from './base'
-import { VueSelect } from 'vue-select'
 
 export default {
   i18nOptions: {
     namespaces: 'field',
   },
 
-  components: {
-    VueSelect,
-  },
-
   extends: base,
 
   data () {
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Record.vue b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
index bb56159a5..8b034e01c 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -40,22 +40,17 @@
       :removable="field.options.selectType !== 'multiple'"
     >
       <template v-slot:single>
-        <vue-select
+        <c-input-select
           v-if="field.options.selectType === 'multiple'"
           v-model="multipleSelected"
           :options="options"
           :get-option-key="getOptionKey"
           :disabled="!module"
           :loading="processing"
-          option-value="recordID"
-          option-text="label"
-          :append-to-body="appendToBody"
-          :calculate-position="calculateDropdownPosition"
           :clearable="false"
           :filterable="false"
           :searchable="searchable"
           :selectable="option => option.selectable"
-          class="bg-white w-100 rounded"
           :placeholder="placeholder"
           multiple
           @search="search"
@@ -68,8 +63,9 @@
             @prev="goToPage(false)"
             @next="goToPage(true)"
           />
-        </vue-select>
-        <vue-select
+        </c-input-select>
+
+        <c-input-select
           v-else
           ref="singleSelect"
           :options="options"
@@ -78,13 +74,10 @@
           :loading="processing"
           option-value="recordID"
           option-text="label"
-          :append-to-body="appendToBody"
-          :calculate-position="calculateDropdownPosition"
           :clearable="false"
           :filterable="false"
           :searchable="searchable"
           :selectable="option => option.selectable"
-          class="bg-white w-100 rounded"
           :placeholder="placeholder"
           @input="selectChange($event)"
           @search="search"
@@ -97,10 +90,11 @@
             @prev="goToPage(false)"
             @next="goToPage(true)"
           />
-        </vue-select>
+        </c-input-select>
       </template>
+
       <template v-slot:default="ctx">
-        <vue-select
+        <c-input-select
           v-if="field.options.selectType === 'each'"
           :options="options"
           :get-option-key="getOptionKey"
@@ -108,13 +102,10 @@
           :loading="processing"
           option-value="recordID"
           option-text="label"
-          :append-to-body="appendToBody"
-          :calculate-position="calculateDropdownPosition"
           :clearable="false"
           :filterable="false"
           :searchable="searchable"
           :selectable="option => option.selectable"
-          class="bg-white w-100 rounded"
           :placeholder="placeholder"
           :value="getRecord(ctx.index)"
           @input="setRecord($event, ctx.index)"
@@ -128,7 +119,8 @@
             @prev="goToPage(false)"
             @next="goToPage(true)"
           />
-        </vue-select>
+        </c-input-select>
+
         <b-spinner
           v-else-if="processing"
           variant="primary"
@@ -139,10 +131,11 @@
         </span>
       </template>
     </multi>
+
     <template
       v-else
     >
-      <vue-select
+      <c-input-select
         v-model="selected"
         :options="options"
         :get-option-key="getOptionKey"
@@ -150,13 +143,10 @@
         :loading="processing"
         option-value="recordID"
         option-text="label"
-        :append-to-body="appendToBody"
-        :calculate-position="calculateDropdownPosition"
         :placeholder="placeholder"
         :filterable="false"
         :searchable="searchable"
         :selectable="option => option.selectable"
-        class="bg-white w-100 rounded"
         @search="search"
       >
         <pagination
@@ -167,7 +157,8 @@
           @prev="goToPage(false)"
           @next="goToPage(true)"
         />
-      </vue-select>
+      </c-input-select>
+
       <errors :errors="errors" />
     </template>
   </b-form-group>
@@ -177,7 +168,6 @@ import base from './base'
 import { debounce } from 'lodash'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { mapActions, mapGetters } from 'vuex'
-import { VueSelect } from 'vue-select'
 import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 import Pagination from '../Common/Pagination.vue'
 
@@ -187,7 +177,6 @@ export default {
   },
 
   components: {
-    VueSelect,
     Pagination,
   },
 
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
index 1e726fdbe..ca694049a 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -48,46 +48,35 @@
         :single-input="field.options.selectType !== 'each'"
       >
         <template v-slot:single>
-          <b-form-select
+          <c-input-select
             v-if="field.options.selectType === 'default'"
             ref="singleSelect"
             :options="selectOptions"
-            @change="selectChange"
-          >
-            <template slot="first">
-              <option
-                :value="undefined"
-                disabled
-              >
-                {{ $t('kind.select.placeholder') }}
-              </option>
-            </template>
-          </b-form-select>
+            :placeholder="$t('kind.select.placeholder')"
+            :reduce="o => o.value"
+            label="text"
+            @input="selectChange"
+          />
 
-          <b-form-select
+          <c-input-select
             v-if="field.options.selectType === 'multiple'"
             v-model="value"
             :options="selectOptions"
-            :select-size="6"
+            label="text"
+            :reduce="o => o.value"
             multiple
           />
         </template>
 
         <template v-slot:default="ctx">
-          <b-form-select
+          <c-input-select
             v-if="field.options.selectType === 'each'"
             v-model="value[ctx.index]"
             :options="selectOptions"
-          >
-            <template slot="first">
-              <option
-                :value="undefined"
-                disabled
-              >
-                {{ $t('kind.select.placeholder') }}
-              </option>
-            </template>
-          </b-form-select>
+            :reduce="o => o.value"
+            :placeholder="$t('kind.select.placeholder')"
+            label="text"
+          />
 
           <span v-else>{{ findLabel(value[ctx.index]) }}</span>
         </template>
@@ -97,17 +86,14 @@
     <template
       v-else
     >
-      <b-form-select
+      <c-input-select
         v-if="field.options.selectType === 'default'"
         v-model="value"
         :options="selectOptions"
-      >
-        <template slot="first">
-          <option :value="undefined">
-            {{ $t('kind.select.optionNotSelected') }}
-          </option>
-        </template>
-      </b-form-select>
+        :reduce="o => o.value"
+        label="text"
+        :placeholder="$t('kind.select.optionNotSelected')"
+      />
 
       <b-form-radio-group
         v-else
diff --git a/client/web/compose/src/components/ModuleFields/Editor/User.vue b/client/web/compose/src/components/ModuleFields/Editor/User.vue
index cb241262d..c8e2d27b1 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/User.vue
@@ -40,20 +40,17 @@
       :removable="field.options.selectType !== 'multiple'"
     >
       <template v-slot:single>
-        <vue-select
+        <c-input-select
           v-if="field.options.selectType === 'default'"
           ref="singleSelect"
           :placeholder="$t('kind.user.suggestionPlaceholder')"
           :options="options"
           :get-option-label="getOptionLabel"
           :get-option-key="getOptionKey"
-          :append-to-body="appendToBody"
-          :calculate-position="calculateDropdownPosition"
           :clearable="false"
           :filterable="false"
           :selectable="option => option.selectable"
           :loading="processing"
-          class="bg-white w-100 rounded"
           @search="search"
           @input="updateValue($event)"
         >
@@ -65,21 +62,19 @@
             @prev="goToPage(false)"
             @next="goToPage(true)"
           />
-        </vue-select>
-        <vue-select
+        </c-input-select>
+
+        <c-input-select
           v-else-if="field.options.selectType === 'multiple'"
           v-model="multipleSelected"
           :placeholder="$t('kind.user.suggestionPlaceholder')"
           :options="options"
           :get-option-label="getOptionLabel"
           :get-option-key="getOptionKey"
-          :append-to-body="appendToBody"
-          :calculate-position="calculateDropdownPosition"
           :filterable="false"
           :selectable="option => option.selectable"
           :loading="processing"
           multiple
-          class="bg-white w-100 rounded"
           @search="search"
         >
           <pagination
@@ -90,23 +85,21 @@
             @prev="goToPage(false)"
             @next="goToPage(true)"
           />
-        </vue-select>
+        </c-input-select>
       </template>
+
       <template v-slot:default="ctx">
-        <vue-select
+        <c-input-select
           v-if="field.options.selectType === 'each'"
           :placeholder="$t('kind.user.suggestionPlaceholder')"
           :options="options"
           :get-option-label="getOptionLabel"
           :get-option-key="getOptionKey"
           :value="getUserByIndex(ctx.index)"
-          :append-to-body="appendToBody"
-          :calculate-position="calculateDropdownPosition"
           :clearable="false"
           :filterable="false"
           :selectable="option => option.selectable"
           :loading="processing"
-          class="bg-white w-100 rounded"
           @search="search"
           @input="updateValue($event, ctx.index)"
         >
@@ -118,25 +111,23 @@
             @prev="goToPage(false)"
             @next="goToPage(true)"
           />
-        </vue-select>
+        </c-input-select>
         <span v-else>{{ getOptionLabel(getUserByIndex(ctx.index)) }}</span>
       </template>
     </multi>
+
     <template
       v-else
     >
-      <vue-select
+      <c-input-select
         :placeholder="$t('kind.user.suggestionPlaceholder')"
         :options="options"
         :get-option-label="getOptionLabel"
         :get-option-key="getOptionKey"
         :value="getUserByIndex()"
-        :append-to-body="appendToBody"
-        :calculate-position="calculateDropdownPosition"
         :filterable="false"
         :selectable="option => option.selectable"
         :loading="processing"
-        class="bg-white w-100 rounded"
         @input="updateValue($event)"
         @search="search"
       >
@@ -148,7 +139,8 @@
           @prev="goToPage(false)"
           @next="goToPage(true)"
         />
-      </vue-select>
+      </c-input-select>
+
       <errors :errors="errors" />
     </template>
   </b-form-group>
@@ -156,7 +148,6 @@
 <script>
 import { debounce } from 'lodash'
 import base from './base'
-import { VueSelect } from 'vue-select'
 import { mapActions, mapGetters } from 'vuex'
 import Pagination from '../Common/Pagination.vue'
 
@@ -166,7 +157,6 @@ export default {
   },
 
   components: {
-    VueSelect,
     Pagination,
   },
 
@@ -218,7 +208,7 @@ export default {
 
       set (users) {
         if (users && Array.isArray(users)) {
-          // When adding/removing items from vue-selects[multiple],
+          // When adding/removing items from c-input-selects[multiple],
           // we get array of options back
 
           this.addUserToResolved(users)
diff --git a/client/web/compose/src/components/ModuleFields/Editor/base.vue b/client/web/compose/src/components/ModuleFields/Editor/base.vue
index cf1222660..699a0d547 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/base.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/base.vue
@@ -52,11 +52,6 @@ export default {
       default: false,
     },
 
-    appendToBody: {
-      type: Boolean,
-      default: true,
-    },
-
     horizontal: {
       type: Boolean,
       default: false,
diff --git a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
index 296520b33..0d87b3ea8 100644
--- a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
+++ b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
@@ -5,19 +5,16 @@
         v-if="!hideNamespaceList"
         class="d-flex w-100 mt-2"
       >
-        <vue-select
-          key="namespaceID"
+        <c-input-select
           data-test-id="select-namespace"
-          label="name"
           :clearable="false"
           :options="filteredNamespaces"
-          :get-option-key="getOptionKey"
-          :value="namespace"
+          :get-option-label="getOptionLabel"
+          :value="namespace.namespaceID"
           :selectable="option => option.namespaceID !== namespace.namespaceID"
           :placeholder="$t('pickNamespace')"
-          :calculate-position="calculateDropdownPosition"
           :autoscroll="false"
-          class="bg-white rounded"
+          :append-to-body="false"
           @option:selected="namespaceSelected"
         >
           <template #list-header>
@@ -34,7 +31,7 @@
               </router-link>
             </li>
           </template>
-        </vue-select>
+        </c-input-select>
 
         <b-input-group-append v-if="canManageNamespaces">
           <b-button
@@ -68,6 +65,7 @@
           >
             {{ $t('publicPages') }}
           </b-button>
+
           <b-button
             v-else-if="namespace.canManageNamespace"
             data-test-id="button-admin"
@@ -77,6 +75,7 @@
           >
             {{ $t('adminPanel') }}
           </b-button>
+
           <c-input-search
             v-model.trim="query"
             :disabled="loading"
@@ -119,8 +118,6 @@ import { mapGetters } from 'vuex'
 import { NoID } from '@cortezaproject/corteza-js'
 import { components, filter } from '@cortezaproject/corteza-vue'
 import { Portal } from 'portal-vue'
-import { VueSelect } from 'vue-select'
-
 const { CSidebarNavItems, CInputSearch } = components
 
 const moduleWrap = (module, pageName) => {
@@ -164,7 +161,6 @@ export default {
 
   components: {
     Portal,
-    VueSelect,
     CSidebarNavItems,
     CInputSearch,
   },
@@ -455,8 +451,11 @@ export default {
       })
     },
 
-    getOptionKey ({ namespaceID }) {
-      return namespaceID
+    getOptionLabel (value) {
+      if (typeof value === 'string') {
+        return this.filteredNamespaces.find(({ namespaceID }) => namespaceID === value).name
+      }
+      return value.name
     },
   },
 }
diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
index 8c5d51e83..85415b83f 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -65,7 +65,7 @@
         :label="$t('reminder.edit.assigneeLabel')"
         label-class="text-primary"
       >
-        <vue-select
+        <c-input-select
           v-model="reminder.assignedTo"
           data-test-id="select-assignee"
           :options="assignees"
@@ -73,10 +73,8 @@
           :get-option-key="getOptionKey"
           :loading="processingUsers"
           :placeholder="$t('field.kind.user.suggestionPlaceholder')"
-          :calculate-position="calculateDropdownPosition"
           :reduce="user => user.userID"
           option-value="userID"
-          class="bg-white rounded"
           @search="searchUsers"
         />
       </b-form-group>
@@ -150,7 +148,6 @@
 
 <script>
 import _ from 'lodash'
-import { VueSelect } from 'vue-select'
 import { system } from '@cortezaproject/corteza-js'
 import { components } from '@cortezaproject/corteza-vue'
 const { CInputDateTime } = components
@@ -161,7 +158,6 @@ export default {
   },
 
   components: {
-    VueSelect,
     CInputDateTime,
   },
 
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
index 8238d88de..552b2a72a 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
@@ -9,18 +9,14 @@
         label-class="text-primary"
       >
         <b-input-group>
-          <b-form-select
+          <c-input-select
             v-model="feed.options.moduleID"
             :options="modules"
-            value-field="moduleID"
-            text-field="name"
-          >
-            <template slot="first">
-              <option value="0">
-                {{ $t('calendar.recordFeed.modulePlaceholder') }}
-              </option>
-            </template>
-          </b-form-select>
+            :reduce="o => o.moduleID"
+            default-value="0"
+            :placeholder="$t('calendar.recordFeed.modulePlaceholder')"
+            label="name"
+          />
         </b-input-group>
       </b-form-group>
 
@@ -41,6 +37,7 @@
             }"
           />
         </b-form-group>
+
         <b-form-group
           :label="$t('calendar.recordFeed.titleLabel')"
           :label-cols="3"
@@ -48,19 +45,13 @@
           breakpoint="md"
           label-class="text-primary"
         >
-          <b-form-select
+          <c-input-select
             v-model="feed.titleField"
             :options="titleFields | optionizeFields"
-          >
-            <template slot="first">
-              <option
-                disabled
-                value=""
-              >
-                {{ $t('calendar.recordFeed.titlePlaceholder') }}
-              </option>
-            </template>
-          </b-form-select>
+            :reduce="o => o.value"
+            label="text"
+            :placeholder="$t('calendar.recordFeed.titlePlaceholder')"
+          />
         </b-form-group>
 
         <b-form-group
@@ -176,6 +167,13 @@ export default {
       return this.modules.find(({ moduleID }) => moduleID === this.feed.options.moduleID)
     },
 
+    moduleOptions () {
+      return [
+        { moduleID: '0', name: this.$t('calendar.recordFeed.modulePlaceholder') },
+        ...this.modules,
+      ]
+    },
+
     /**
      * Determines if given module has any multi-fields
      * @returns {Boolean}
diff --git a/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue b/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
index ee45f0c8f..37c4e2ddf 100644
--- a/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
@@ -5,19 +5,17 @@
       label-class="text-primary"
     >
       <b-input-group class="d-flex w-100">
-        <vue-select
+        <c-input-select
           v-model="block.options.chartID"
           :options="charts"
           :get-option-key="getOptionKey"
           :placeholder="$t('chart.pick')"
           :reduce="option => option.chartID"
-          :calculate-position="calculateDropdownPosition"
           label="name"
-          append-to-body
           :selectable="c => !c.deletedAt"
-          class="bg-white rounded"
           @input="chartSelected"
         />
+
         <b-input-group-append>
           <b-button
             v-b-tooltip.hover="{ title: $t('chart.openInBuilder'), container: '#body' }"
@@ -38,27 +36,22 @@
         label-class="d-flex align-items-center text-primary"
         class="mb-1"
       >
-        <template #label>
-          {{ $t('chart.drillDown.label') }}
-          <b-form-checkbox
-            v-model="options.drillDown.enabled"
-            switch
-            class="ml-1"
-          />
-        </template>
+        <c-input-checkbox
+          v-model="options.drillDown.enabled"
+          switch
+          :labels="checkboxLabel"
+          class="mb-2"
+        />
 
-        <vue-select
+        <c-input-select
           v-model="options.drillDown.blockID"
           :options="drillDownOptions"
           :get-option-key="getOptionKey"
           :disabled="!options.drillDown.enabled"
           :get-option-label="o => o.title || o.kind"
           :reduce="option => option.blockID"
-          :calculate-position="calculateDropdownPosition"
           :clearable="true"
           :placeholder="$t('chart.drillDown.openInModal')"
-          append-to-body
-          class="bg-white w-100 rounded"
         />
       </b-form-group>
     </template>
@@ -68,7 +61,6 @@
 import base from './base'
 import { mapGetters } from 'vuex'
 import { NoID } from '@cortezaproject/corteza-js'
-import { VueSelect } from 'vue-select'
 
 export default {
   i18nOptions: {
@@ -77,12 +69,17 @@ export default {
 
   name: 'Chart',
 
-  components: {
-    VueSelect,
-  },
-
   extends: base,
 
+  data () {
+    return {
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
+    }
+  },
+
   computed: {
     ...mapGetters({
       charts: 'chart/set',
diff --git a/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue b/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue
index 8865433c7..1551a8f77 100644
--- a/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue
@@ -1,21 +1,21 @@
 <template>
   <b-tab :title="$t('comment.label')">
     <b-form-group
-      :label="$t('general.module')"
       label-class="text-primary"
+      :label="$t('general.module')"
     >
-      <b-form-select
+      <c-input-select
         v-model="options.moduleID"
         :options="moduleOptions"
-        text-field="name"
-        value-field="moduleID"
+        label="name"
+        :reduce="module => module.moduleID"
         required
       />
     </b-form-group>
+
     <div v-if="selectedModule">
       <b-form-group
         :label="$t('field.selector.available')"
-        label-class="text-primary"
       >
         <div class="d-flex">
           <div class="border fields w-100 p-2">
@@ -25,9 +25,12 @@
               class="field"
             >
               <span v-if="field.label">{{ field.label }} ({{ field.name }})</span>
+
               <span v-else>{{ field.name }}</span>
+
               <span class="small float-right">
                 <span v-if="field.isSystem">{{ $t('field.selector.systemField') }}</span>
+
                 <span v-else>{{ field.kind }}</span>
               </span>
             </div>
@@ -47,6 +50,7 @@
           :value="true"
           :placeholder="$t('recordList.record.prefilterPlaceholder')"
         />
+
         <b-form-text>
           <i18next
             path="recordList.record.prefilterFootnote"
@@ -71,6 +75,7 @@
           <option value="">
             {{ $t('general.label.none') }}
           </option>
+
           <option
             v-for="(field, index) in selectedModuleFieldsByType('String')"
             :key="index"
diff --git a/client/web/compose/src/components/PageBlocks/Configurator.vue b/client/web/compose/src/components/PageBlocks/Configurator.vue
index 8a4e6e1bc..7bde5bdb7 100644
--- a/client/web/compose/src/components/PageBlocks/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Configurator.vue
@@ -73,10 +73,12 @@
             :label="$t('general.headerStyle')"
             label-class="text-primary"
           >
-            <b-form-select
+            <c-input-select
               id="color"
               v-model="block.style.variants.headerText"
               :options="textVariants"
+              :reduce="o => o.value"
+              label="text"
             />
           </b-form-group>
 
diff --git a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
index 72179a068..2d390abb5 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
+++ b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
@@ -9,18 +9,14 @@
         label-class="text-primary"
       >
         <b-input-group>
-          <b-form-select
+          <c-input-select
             v-model="feed.options.moduleID"
             :options="modules"
-            value-field="moduleID"
-            text-field="name"
-          >
-            <template slot="first">
-              <option value="0">
-                {{ $t('geometry.recordFeed.modulePlaceholder') }}
-              </option>
-            </template>
-          </b-form-select>
+            :reduce="o => o.moduleID"
+            :placeholder="$t('calendar.recordFeed.modulePlaceholder')"
+            default-value="0"
+            label="name"
+          />
         </b-input-group>
       </b-form-group>
 
@@ -54,19 +50,13 @@
           breakpoint="md"
           label-class="text-primary"
         >
-          <b-form-select
+          <c-input-select
             v-model="feed.titleField"
             :options="titleFields | optionizeFields"
-          >
-            <template slot="first">
-              <option
-                disabled
-                value=""
-              >
-                {{ $t('geometry.recordFeed.titlePlaceholder') }}
-              </option>
-            </template>
-          </b-form-select>
+            :reduce="o => o.value"
+            label="text"
+            :placeholder="$t('geometry.recordFeed.titlePlaceholder')"
+          />
         </b-form-group>
 
         <b-form-group
diff --git a/client/web/compose/src/components/PageBlocks/IFrameConfigurator.vue b/client/web/compose/src/components/PageBlocks/IFrameConfigurator.vue
index c436d7a11..12018e17a 100644
--- a/client/web/compose/src/components/PageBlocks/IFrameConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/IFrameConfigurator.vue
@@ -10,7 +10,6 @@
       <b-select
         v-model="options.srcField"
         type="url"
-        class="form-control"
         :options="fieldOptions"
       />
     </b-form-group>
@@ -21,7 +20,6 @@
     >
       <b-form-input
         v-model="options.src"
-        class="form-control"
         type="url"
       />
     </b-form-group>
diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
index 82790403e..9294e27f1 100644
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
@@ -77,22 +77,14 @@
                 :label="$t('metric.edit.moduleLabel')"
                 label-class="text-primary"
               >
-                <b-form-select
+                <c-input-select
                   v-model="edit.moduleID"
                   :options="modules"
-                  text-field="name"
+                  label="name"
                   class="mt-1"
-                  value-field="moduleID"
-                >
-                  <template slot="first">
-                    <option
-                      :value="undefined"
-                      disabled
-                    >
-                      {{ $t('metric.edit.modulePlaceholder') }}
-                    </option>
-                  </template>
-                </b-form-select>
+                  :reduce="o => o.moduleID"
+                  :placeholder="$t('metric.edit.modulePlaceholder')"
+                />
               </b-form-group>
 
               <!-- <b-form-group
@@ -184,14 +176,12 @@
                 :label="$t('metric.edit.metricFieldLabel')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="edit.metricField"
                   :placeholder="$t('metric.edit.metricFieldSelect')"
                   :options="metricFields"
                   :get-option-key="getOptionMetricFieldKey"
                   :reduce="f => f.name"
-                  :calculate-position="calculateDropdownPosition"
-                  class="bg-white rounded"
                   @input="onMetricFieldChange"
                 />
               </b-form-group>
@@ -200,15 +190,13 @@
                 :label="$t('metric.edit.metricAggregateLabel')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="edit.operation"
                   :disabled="edit.metricField === 'count'"
                   :placeholder="$t('metric.edit.metricSelectAggregate')"
                   :options="aggregationOperations"
                   :get-option-key="getOptionAggregationOperationKey"
                   :reduce="a => a.operation"
-                  :calculate-position="calculateDropdownPosition"
-                  class="bg-white rounded"
                 />
               </b-form-group>
 
@@ -272,7 +260,7 @@
                   />
                 </template>
 
-                <vue-select
+                <c-input-select
                   v-model="edit.drillDown.blockID"
                   :options="drillDownOptions"
                   :disabled="!edit.drillDown.enabled"
@@ -281,7 +269,6 @@
                   :clearable="true"
                   :placeholder="$t('metric.drillDown.openInModal')"
                   append-to-body
-                  class="block-selector bg-white w-100 rounded"
                 />
               </b-form-group>
             </fieldset>
@@ -341,7 +328,6 @@ import base from '../base'
 import MStyle from './MStyle'
 import { mapGetters } from 'vuex'
 import MetricBase from '../MetricBase'
-import { VueSelect } from 'vue-select'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 
 export default {
@@ -353,7 +339,6 @@ export default {
   components: {
     MStyle,
     MetricBase,
-    VueSelect,
   },
   extends: base,
 
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index 62fe53a0f..1b541ec10 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -80,6 +80,7 @@
             {{ $t("navigation.navigationItems") }}
           </h5>
         </div>
+
         <div class="mt-3">
           <draggable
             v-model="block.options.navigationItems"
@@ -100,24 +101,30 @@
                 <thead>
                   <tr>
                     <th style="width: auto;" />
+
                     <th style="min-width: 200px;">
                       {{ $t("navigation.type") }}
                     </th>
+
                     <th style="min-width: 200px;">
                       {{ $t("navigation.color") }}
                     </th>
+
                     <th style="min-width: 200px;">
                       {{ $t("navigation.background") }}
                     </th>
+
                     <th
                       class="text-center"
                       style="width: 50px; min-width: 50px;"
                     >
                       {{ $t("navigation.enabled") }}
                     </th>
+
                     <th style="width: auto; min-width: 100px;" />
                   </tr>
                 </thead>
+
                 <tbody>
                   <tr>
                     <td class="align-middle">
@@ -126,12 +133,14 @@
                         class="grab text-light"
                       />
                     </td>
+
                     <td class="align-middle">
                       <b-form-select
                         v-model="item.type"
                         :options="navigationItemTypes"
                       />
                     </td>
+
                     <td class="align-middle">
                       <c-input-color-picker
                         v-model="item.options.textColor"
@@ -143,6 +152,7 @@
                         class="w-100"
                       />
                     </td>
+
                     <td class="align-middle">
                       <c-input-color-picker
                         v-model="item.options.backgroundColor"
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
index fd689918d..eb86c327b 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -1,6 +1,7 @@
 <template>
   <tr>
     <td />
+
     <td>
       <b-form-group
         :label="$t('navigation.fieldLabel')"
@@ -12,28 +13,27 @@
         />
       </b-form-group>
     </td>
+
     <td style="min-width: 200px;">
       <b-form-group
         :label="$t('navigation.composePage')"
         label-class="text-primary"
       >
-        <vue-select
+        <c-input-select
           key="pageID"
           v-model="options.item.pageID"
           :placeholder="$t('navigation.none')"
           :options="pageList"
-          append-to-body
           :get-option-key="getOptionKey"
           label="title"
-          :calculate-position="calculateDropdownPosition"
           :reduce="f => f.pageID"
           option-value="pageID"
           option-text="title"
-          class="bg-white rounded"
           @input="updateLabelValue"
         />
       </b-form-group>
     </td>
+
     <td>
       <b-form-group
         :label="$t('navigation.openIn')"
@@ -45,6 +45,7 @@
         />
       </b-form-group>
     </td>
+
     <td
       v-if="selectedPageChildren(options.item.pageID).length > 0"
       cols="12"
@@ -63,21 +64,16 @@
         />
       </b-form-group>
     </td>
+
     <td />
   </tr>
 </template>
 
 <script>
 import base from './base'
-
-import { VueSelect } from 'vue-select'
 import { NoID, compose } from '@cortezaproject/corteza-js'
 
 export default {
-  components: {
-    VueSelect,
-  },
-
   extends: base,
 
   props: {
diff --git a/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue b/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
index 37e62e4c1..be64a82f3 100644
--- a/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
@@ -39,7 +39,7 @@
           label-class="text-primary"
         >
           <c-input-checkbox
-            v-model="options.accessTokenRequired"
+            v-model="accessTokenRequired"
             switch
             :labels="checkboxLabels"
           />
@@ -65,15 +65,13 @@
                 :label="$t('prefill.to')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="options.prefill.to"
                   :options="moduleTextFields"
                   :get-option-label="getFieldLabel"
                   :get-option-key="getOptionKey"
                   :placeholder="$t('prefill.selectField')"
-                  :reduce="getOptionKey"
-                  :calculate-position="calculateDropdownPosition"
-                  append-to-body
+                  :reduce="field => field.fieldID"
                   class="bg-white rounded"
                 />
               </b-form-group>
@@ -86,7 +84,7 @@
                 :label="$t('prefill.subject')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="options.prefill.subject"
                   :options="moduleTextFields"
                   :get-option-label="getFieldLabel"
@@ -94,8 +92,6 @@
                   :placeholder="$t('prefill.selectField')"
                   :reduce="getOptionKey"
                   :calculate-position="calculateDropdownPosition"
-                  append-to-body
-                  class="bg-white rounded"
                 />
               </b-form-group>
             </b-col>
@@ -107,7 +103,7 @@
                 :label="$t('prefill.body')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="options.prefill.body"
                   :options="moduleTextFields"
                   :get-option-label="getFieldLabel"
@@ -115,8 +111,6 @@
                   :placeholder="$t('prefill.selectField')"
                   :reduce="getOptionKey"
                   :calculate-position="calculateDropdownPosition"
-                  append-to-body
-                  class="bg-white rounded"
                 />
               </b-form-group>
             </b-col>
@@ -131,7 +125,7 @@
                 :label="$t('prefill.queryString')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="options.prefill.queryString"
                   :options="moduleTextFields"
                   :get-option-label="getFieldLabel"
@@ -139,8 +133,6 @@
                   :placeholder="$t('prefill.selectField')"
                   :reduce="getOptionKey"
                   :calculate-position="calculateDropdownPosition"
-                  append-to-body
-                  class="bg-white rounded"
                 />
               </b-form-group>
             </b-col>
@@ -152,7 +144,6 @@
 </template>
 
 <script>
-import { VueSelect } from 'vue-select'
 import { NoID } from '@cortezaproject/corteza-js'
 import base from '../base'
 
@@ -162,10 +153,6 @@ export default {
     keyPrefix: 'nylas.configurator',
   },
 
-  components: {
-    VueSelect,
-  },
-
   extends: base,
 
   data () {
@@ -194,6 +181,16 @@ export default {
     showPreviewSection () {
       return ['Composer', 'Mailbox'].includes(this.options.kind) && (this.page.moduleID !== NoID)
     },
+
+    accessTokenRequired: {
+      get () {
+        return !!this.options.accessTokenRequired
+      },
+
+      set (v) {
+        this.options.accessTokenRequired = v
+      },
+    },
   },
 
   beforeDestroy () {
diff --git a/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue b/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
index 7dd809b97..d4e09c131 100644
--- a/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
@@ -33,15 +33,13 @@
             :label="$t('progress.module.label')"
             label-class="text-primary"
           >
-            <vue-select
+            <c-input-select
               v-model="options.value.moduleID"
               label="name"
               :placeholder="$t('progress.module.select')"
               :options="modules"
               :get-option-key="getOptionModuleKey"
               :reduce="m => m.moduleID"
-              :calculate-position="calculateDropdownPosition"
-              class="bg-white rounded"
             />
           </b-form-group>
         </b-col>
@@ -81,14 +79,12 @@
               :label="$t('progress.field.label')"
               label-class="text-primary"
             >
-              <vue-select
+              <c-input-select
                 v-model="options.value.field"
                 :placeholder="$t('progress.field.select')"
                 :options="valueModuleFields"
                 :get-option-key="getOptionModuleFieldKey"
                 :reduce="f => f.name"
-                :calculate-position="calculateDropdownPosition"
-                class="bg-white rounded"
                 @input="fieldChanged($event, options.value)"
               />
             </b-form-group>
@@ -102,7 +98,7 @@
               :label="$t('progress.aggregate.label')"
               label-class="text-primary"
             >
-              <vue-select
+              <c-input-select
                 v-model="options.value.operation"
                 label="name"
                 :disabled="!options.value.field || options.value.field === 'count'"
@@ -110,8 +106,6 @@
                 :options="aggregationOperations"
                 :get-option-key="getOptionAggregationOperationKey"
                 :reduce="a => a.operation"
-                :calculate-position="calculateDropdownPosition"
-                class="bg-white rounded"
               />
             </b-form-group>
           </b-col>
@@ -151,15 +145,13 @@
             :label="$t('progress.module.label')"
             label-class="text-primary"
           >
-            <vue-select
+            <c-input-select
               v-model="options.minValue.moduleID"
               label="name"
               :placeholder="$t('progress.module.select')"
               :options="modules"
               :get-option-key="getOptionModuleKey"
               :reduce="m => m.moduleID"
-              :calculate-position="calculateDropdownPosition"
-              class="bg-white rounded"
             />
           </b-form-group>
         </b-col>
@@ -199,14 +191,12 @@
               :label="$t('progress.field.label')"
               label-class="text-primary"
             >
-              <vue-select
+              <c-input-select
                 v-model="options.minValue.field"
                 :placeholder="$t('progress.field.select')"
                 :options="minValueModuleFields"
                 :get-option-key="getOptionModuleFieldKey"
                 :reduce="f => f.name"
-                :calculate-position="calculateDropdownPosition"
-                class="bg-white rounded"
                 @input="fieldChanged($event, options.minValue)"
               />
             </b-form-group>
@@ -220,7 +210,7 @@
               :label="$t('progress.aggregate.label')"
               label-class="text-primary"
             >
-              <vue-select
+              <c-input-select
                 v-model="options.minValue.operation"
                 label="name"
                 :disabled="!options.minValue.field || options.minValue.field === 'count'"
@@ -228,8 +218,6 @@
                 :options="aggregationOperations"
                 :get-option-key="getOptionAggregationOperationKey"
                 :reduce="a => a.operation"
-                :calculate-position="calculateDropdownPosition"
-                class="bg-white rounded"
               />
             </b-form-group>
           </b-col>
@@ -269,15 +257,13 @@
             :label="$t('progress.module.label')"
             label-class="text-primary"
           >
-            <vue-select
+            <c-input-select
               v-model="options.maxValue.moduleID"
               label="name"
               :placeholder="$t('progress.module.select')"
               :options="modules"
               :get-option-key="getOptionModuleKey"
               :reduce="m => m.moduleID"
-              :calculate-position="calculateDropdownPosition"
-              class="bg-white rounded"
             />
           </b-form-group>
         </b-col>
@@ -317,14 +303,13 @@
               :label="$t('progress.field.label')"
               label-class="text-primary"
             >
-              <vue-select
+              <c-input-select
                 v-model="options.maxValue.field"
                 :placeholder="$t('progress.field.select')"
                 :options="maxValueModuleFields"
                 :get-option-key="getOptionModuleFieldKey"
                 :reduce="f => f.name"
-                :calculate-position="calculateDropdownPosition"
-                class="bg-white rounded"
+                class="bg-white"
                 @input="fieldChanged($event, options.maxValue)"
               />
             </b-form-group>
@@ -338,7 +323,7 @@
               :label="$t('progress.aggregate.label')"
               label-class="text-primary"
             >
-              <vue-select
+              <c-input-select
                 v-model="options.maxValue.operation"
                 label="name"
                 :disabled="!options.maxValue.field || options.maxValue.field === 'count'"
@@ -346,8 +331,7 @@
                 :options="aggregationOperations"
                 :get-option-key="getOptionAggregationOperationKey"
                 :reduce="a => a.operation"
-                :calculate-position="calculateDropdownPosition"
-                class="bg-white rounded"
+                class="bg-white"
               />
             </b-form-group>
           </b-col>
@@ -373,9 +357,11 @@
             :label="$t('progress.default-variant')"
             label-class="text-primary"
           >
-            <b-form-select
+            <c-input-select
               v-model="options.display.variant"
               :options="variants"
+              label="text"
+              :reduce="v => v.value"
             />
           </b-form-group>
         </b-col>
@@ -449,6 +435,7 @@
                 {{ $t('progress.threshold.variant') }}
               </small>
             </template>
+
             <b-row
               v-for="(t, i) in options.display.thresholds"
               :key="i"
@@ -467,6 +454,7 @@
                   />
                 </b-input-group>
               </b-col>
+
               <b-col
                 class="d-flex align-items-center justify-content-center"
               >
@@ -555,7 +543,6 @@
 import base from './base'
 import { mapGetters } from 'vuex'
 import { compose, validator } from '@cortezaproject/corteza-js'
-import { VueSelect } from 'vue-select'
 import FieldViewer from '../ModuleFields/Viewer'
 
 export default {
@@ -566,7 +553,6 @@ export default {
   name: 'ProgressConfigurator',
 
   components: {
-    VueSelect,
     FieldViewer,
   },
 
diff --git a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
index 3f569cabb..4fffda733 100644
--- a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -49,16 +49,13 @@
             :description="$t('record.referenceRecordFieldDescription')"
             label-class="text-primary"
           >
-            <vue-select
+            <c-input-select
               v-model="options.referenceField"
               :options="recordSelectorFields"
               :get-option-label="getFieldLabel"
               :get-option-key="getOptionKey"
               :placeholder="$t('record.referenceRecordFieldPlaceholder')"
               :reduce="getOptionKey"
-              :calculate-position="calculateDropdownPosition"
-              append-to-body
-              class="bg-white rounded"
               @input="updateReferenceModule($event, [])"
             />
           </b-form-group>
@@ -73,7 +70,7 @@
             label-class="text-primary"
           >
             <c-input-checkbox
-              v-model="options.inlineRecordEditEnabled"
+              v-model="inlineRecordEditEnabled"
               switch
               :labels="checkboxLabel"
             />
@@ -174,17 +171,14 @@
               class="align-middle"
               style="width: 33%; min-width: 250px;"
             >
-              <vue-select
+              <c-input-select
                 v-model="condition.field"
                 :options="block.options.fields"
-                append-to-body
                 :placeholder="$t('record.fieldConditions.selectPlaceholder')"
                 :selectable="option => isSelectable(option)"
                 :get-option-label="getOptionLabel"
                 :get-option-key="getOptionKey"
                 :reduce="option => option.isSystem ? option.name : option.fieldID"
-                :calculate-position="calculateDropdownPosition"
-                class="bg-white rounded"
               />
             </b-td>
 
@@ -235,7 +229,6 @@
 <script>
 import base from './base'
 import FieldPicker from 'corteza-webapp-compose/src/components/Common/FieldPicker'
-import { VueSelect } from 'vue-select'
 import { mapActions } from 'vuex'
 import { NoID, compose } from '@cortezaproject/corteza-js'
 
@@ -248,7 +241,6 @@ export default {
 
   components: {
     FieldPicker,
-    VueSelect,
   },
 
   extends: base,
@@ -289,6 +281,15 @@ export default {
     fieldModule () {
       return (this.options.referenceField && this.referenceModule) ? this.referenceModule : this.module
     },
+
+    inlineRecordEditEnabled: {
+      get () {
+        return !!this.options.inlineRecordEditEnabled
+      },
+      set (v) {
+        this.options.inlineRecordEditEnabled = v
+      },
+    },
   },
 
   created () {
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index 46b624f06..3385a831e 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -22,11 +22,11 @@
               variant="primary"
               label-class="text-primary"
             >
-              <b-form-select
+              <c-input-select
                 v-model="options.moduleID"
                 :options="moduleOptions"
-                text-field="name"
-                value-field="moduleID"
+                label="name"
+                :reduce="o => o.moduleID"
                 required
               />
             </b-form-group>
@@ -262,6 +262,7 @@
                   v-model="options.prefilter"
                   :placeholder="$t('recordList.record.prefilterPlaceholder')"
                 />
+
                 <b-form-text>
                   <i18next
                     path="recordList.record.prefilterFootnote"
@@ -359,15 +360,13 @@
                           class="text-center align-middle"
                           style="min-width: 200px;"
                         >
-                          <vue-select
+                          <c-input-select
                             v-model="filter.roles"
                             :options="roleOptions"
                             :get-option-label="getRoleLabel"
                             :get-option-key="getOptionKey"
                             :placeholder="$t('recordList.filter.role.placeholder')"
                             :reduce="role => role.roleID"
-                            :calculate-position="calculateDropdownPosition"
-                            append-to-body
                             multiple
                             class="bg-white rounded"
                           />
@@ -816,7 +815,6 @@
 <script>
 import { mapGetters } from 'vuex'
 import { NoID } from '@cortezaproject/corteza-js'
-import { VueSelect } from 'vue-select'
 import Draggable from 'vuedraggable'
 import base from './base'
 import AutomationTab from './Shared/AutomationTab'
@@ -837,7 +835,6 @@ export default {
     FieldPicker,
     CInputPresort,
     RecordListFilter,
-    VueSelect,
     Draggable,
   },
 
diff --git a/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
index 5d2165870..cb8b05311 100644
--- a/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
@@ -2,13 +2,12 @@
   <b-tab :title="$t('recordOrganizer.label')">
     <b-form-group
       :label="$t('general.module')"
-      label-class="text-primary"
     >
-      <b-form-select
+      <c-input-select
         v-model="options.moduleID"
         :options="moduleOptions"
-        text-field="name"
-        value-field="moduleID"
+        label="name"
+        :reduce="m => m.moduleID"
         required
       />
     </b-form-group>
@@ -26,9 +25,12 @@
               class="field"
             >
               <span v-if="field.label">{{ field.label }} ({{ field.name }})</span>
+
               <span v-else>{{ field.name }}</span>
+
               <span class="small float-right">
                 <span v-if="field.isSystem">{{ $t('field.selector.systemField') }}</span>
+
                 <span v-else>{{ field.kind }}</span>
               </span>
             </div>
@@ -68,18 +70,13 @@
         breakpoint="md"
         label-class="text-primary"
       >
-        <b-form-select v-model="options.labelField">
-          <option value="">
-            {{ $t('general.label.none') }}
-          </option>
-          <option
-            v-for="(field, index) in selectedModuleFields"
-            :key="index"
-            :value="field.name"
-          >
-            {{ field.label || field.name }} ({{ field.kind }})
-          </option>
-        </b-form-select>
+        <c-input-select
+          v-model="options.labelField"
+          :options="selectedModuleFields"
+          :reduce="o => o.name"
+          :get-option-label="fieldLabel"
+          :placeholder="$t('general.label.none')"
+        />
         <b-form-text>{{ $t('recordOrganizer.labelField.footnote') }}</b-form-text>
       </b-form-group>
 
@@ -90,18 +87,14 @@
         breakpoint="md"
         label-class="text-primary"
       >
-        <b-form-select v-model="options.descriptionField">
-          <option value="">
-            {{ $t('general.label.none') }}
-          </option>
-          <option
-            v-for="(field, index) in selectedModuleFields"
-            :key="index"
-            :value="field.name"
-          >
-            {{ field.label || field.name }} ({{ field.kind }})
-          </option>
-        </b-form-select>
+        <c-input-select
+          v-model="options.descriptionField"
+          :options="selectedModuleFields"
+          :reduce="o => o.name"
+          :get-option-label="descriptionLabel"
+          :placeholder="$t('general.label.none')"
+        />
+
         <b-form-text class="text-secondary small">
           {{ $t('recordOrganizer.descriptionField.footnote') }}
         </b-form-text>
@@ -138,18 +131,14 @@
         breakpoint="md"
         label-class="text-primary"
       >
-        <b-form-select v-model="options.groupField">
-          <option value="">
-            {{ $t('general.label.none') }}
-          </option>
-          <option
-            v-for="(field, index) in groupFields"
-            :key="index"
-            :value="field.name"
-          >
-            {{ field.label || field.name }}
-          </option>
-        </b-form-select>
+        <c-input-select
+          v-model="options.groupField"
+          :options="groupFields"
+          :reduce="o => o.name"
+          :get-option-label="groupFieldLabel"
+          :placeholder="$t('general.label.none')"
+        />
+
         <b-form-text class="text-secondary small">
           {{ $t('recordOrganizer.groupField.footnote') }}
         </b-form-text>
@@ -326,6 +315,18 @@ export default {
     setDefaultValues () {
       this.mock = []
     },
+
+    fieldLabel (option) {
+      return `${option.label || option.name} (${option.kind})`
+    },
+
+    descriptionLabel (option) {
+      return `${option.label || option.name} (${option.kind})`
+    },
+
+    groupFieldLabel (option) {
+      return `${option.label || option.name}`
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/Report/Configurator.vue b/client/web/compose/src/components/PageBlocks/Report/Configurator.vue
index d7790b0f8..2d6b01f78 100644
--- a/client/web/compose/src/components/PageBlocks/Report/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Report/Configurator.vue
@@ -6,26 +6,29 @@
           :label="$t('report.label')"
           label-class="text-primary"
         >
-          <b-form-select
+          <c-input-select
             v-model="options.reportID"
-            :options="reportOptions"
-            text-field="label"
-            value-field="reportID"
+            :options="reports"
+            :get-option-label="o => o.meta.name || o.handle"
+            default-value="0"
+            :reduce="o => o.reportID"
+            @input="handleReportChange"
           />
         </b-form-group>
       </b-col>
+
       <b-col
-        v-if="selectedReport && scenarioOptions.length > 1"
+        v-if="selectedReport && selectedReport.scenarios && selectedReport.scenarios.length > 1"
       >
         <b-form-group
           :label="$t('report.scenario.label')"
           label-class="text-primary"
         >
-          <b-form-select
+          <c-input-select
             v-model="options.scenarioID"
-            :options="scenarioOptions"
-            text-field="label"
-            value-field="scenarioID"
+            :options="selectedReport.scenarios"
+            default-value="0"
+            :reduce="o => o.scenarioID"
           />
         </b-form-group>
       </b-col>
@@ -37,12 +40,33 @@
       :description="$t('report.element.description')"
       label-class="text-primary"
     >
-      <b-form-select
+      <c-input-select
         v-model="options.elementID"
-        :options="elementOptions"
-        text-field="name"
-        value-field="elementID"
-      />
+        :options="selectedReport.blocks"
+        :reduce="o => o.elements[0].elementID"
+        :get-option-label="getElementsOptionLabel"
+        default-value="0"
+      >
+        <template #option="option">
+          <div v-if="option.elements.length > 0">
+            <strong>{{ option.title || `${$t('general:label.block')} ${option.key}` }}</strong>
+
+            <ul class="list-unstyled">
+              <li
+                v-for="subOption in option.elements"
+                :key="subOption.name"
+                class="ml-2"
+              >
+                {{ subOption.name || subOption.kind }}
+              </li>
+            </ul>
+          </div>
+
+          <div v-else>
+            {{ option.name }}
+          </div>
+        </template>
+      </c-input-select>
     </b-form-group>
   </b-tab>
 </template>
@@ -64,13 +88,6 @@ export default {
   },
 
   computed: {
-    reportOptions () {
-      return [
-        { reportID: NoID, label: this.$t('general:label.none') },
-        ...this.reports.map(r => ({ ...r, label: r.meta.name || r.handle })),
-      ]
-    },
-
     selectedReport () {
       const { reportID = NoID } = this.options
 
@@ -80,30 +97,6 @@ export default {
 
       return undefined
     },
-
-    scenarioOptions () {
-      const { scenarios = [] } = this.selectedReport || {}
-
-      return [
-        { scenarioID: NoID, label: this.$t('general:label.none') },
-        ...scenarios,
-      ]
-    },
-
-    elementOptions () {
-      const elements = [{ elementID: NoID, name: this.$t('general:label.none') }]
-
-      if (this.selectedReport) {
-        this.selectedReport.blocks.forEach(b => {
-          elements.push({
-            label: b.title || `${this.$t('general:label.block')} ${b.key}`,
-            options: b.elements.map(({ elementID, name, kind }) => ({ elementID, name: name || kind })),
-          })
-        })
-      }
-
-      return elements
-    },
   },
 
   watch: {
@@ -132,6 +125,18 @@ export default {
     setDefaultValues () {
       this.reports = []
     },
+
+    getElementsOptionLabel (o) {
+      const blockTitle = o.title.length > 1 ? `${o.title} - ` : ''
+      return `${blockTitle}${o.elements[0].name}` || o.elements[0].kind
+    },
+
+    handleReportChange () {
+      if (this.options.elementID) {
+        this.options.elementID = NoID
+        this.options.scenarioID = NoID
+      }
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/SocialFeedConfigurator.vue b/client/web/compose/src/components/PageBlocks/SocialFeedConfigurator.vue
index 187dca1da..2bede235e 100644
--- a/client/web/compose/src/components/PageBlocks/SocialFeedConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/SocialFeedConfigurator.vue
@@ -10,6 +10,7 @@
         :options="selectOptions"
       />
     </b-form-group>
+
     <b-form-group
       :label="$t('socialFeed.twitterProfileLabel')"
       label-class="text-primary"
diff --git a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
index 9eb956bb1..bacd6b049 100644
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -165,7 +165,7 @@
             style="width: 50%; min-width: 200px;"
           >
             <b-input-group class="d-flex flex-nowrap w-100">
-              <vue-select
+              <c-input-select
                 v-model="tab.blockID"
                 :options="blockOptions"
                 :placeholder="$t('tabs.placeholder.block')"
@@ -173,9 +173,6 @@
                 :get-option-key="getOptionKey"
                 :selectable="option => isSelectable(option)"
                 :reduce="option => option.value"
-                :calculate-position="calculateDropdownPosition"
-                append-to-body
-                class="bg-white rounded"
               />
 
               <b-input-group-append>
@@ -261,7 +258,6 @@
 <script>
 import base from './base'
 import draggable from 'vuedraggable'
-import { VueSelect } from 'vue-select'
 import { fetchID } from 'corteza-webapp-compose/src/lib/block'
 
 export default {
@@ -273,7 +269,6 @@ export default {
 
   components: {
     draggable,
-    VueSelect,
     //  Importing like this because configurator is recursive
     NewBlockSelector: () => import('corteza-webapp-compose/src/components/Admin/Page/Builder/Selector'),
   },
@@ -377,8 +372,8 @@ export default {
       return title || kind
     },
 
-    getOptionKey ({ blockID }) {
-      return blockID
+    getOptionKey (block) {
+      return fetchID(block)
     },
 
     setDefaultValues () {
diff --git a/client/web/compose/src/components/Public/Record/BulkEdit/index.vue b/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
index 0cb2ae854..78c9eaa2d 100644
--- a/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
+++ b/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
@@ -51,17 +51,14 @@
       </b-card>
 
       <template #modal-footer>
-        <vue-select
+        <c-input-select
           v-model="selectedField"
           :placeholder="getFieldSelectorPlaceholder"
           :get-option-label="getFieldLabel"
           :get-option-key="getOptionKey"
           :options="moduleFields"
-          append-to-body
-          :calculate-position="calculateDropdownPosition"
           :selectable="option => !fields.includes(option.name)"
           :reduce="f => f.name"
-          class="bg-white position-relative rounded"
           @input="addField"
         />
 
@@ -103,7 +100,6 @@
 
 <script>
 import FieldEditor from 'corteza-webapp-compose/src/components/ModuleFields/Editor'
-import { VueSelect } from 'vue-select'
 import { compose } from '@cortezaproject/corteza-js'
 import record from 'corteza-webapp-compose/src/mixins/record.js'
 
@@ -115,7 +111,6 @@ export default {
   name: 'BulkEdit',
 
   components: {
-    VueSelect,
     FieldEditor,
   },
 
diff --git a/client/web/compose/src/components/Public/Record/Exporter/index.vue b/client/web/compose/src/components/Public/Record/Exporter/index.vue
index 72791bed2..f099df65f 100644
--- a/client/web/compose/src/components/Public/Record/Exporter/index.vue
+++ b/client/web/compose/src/components/Public/Record/Exporter/index.vue
@@ -147,14 +147,12 @@
             {{ $t('recordList.export.specifyTimezone') }}
           </b-form-checkbox>
 
-          <vue-select
+          <c-input-select
             v-if="forTimezone"
             v-model="exportTimezone"
             :options="timezones"
             :get-option-key="getOptionKey"
-            :calculate-position="calculateDropdownPosition"
             :placeholder="$t('recordList.export.timezonePlaceholder')"
-            class="bg-white rounded"
           />
         </b-form-group>
       </template>
@@ -206,7 +204,6 @@ import { components } from '@cortezaproject/corteza-vue'
 import moment from 'moment'
 import { throttle } from 'lodash'
 import tz from 'compact-timezone-list'
-import { VueSelect } from 'vue-select'
 import FieldPicker from 'corteza-webapp-compose/src/components/Common/FieldPicker'
 import { getFieldFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
@@ -220,7 +217,6 @@ export default {
 
   components: {
     FieldPicker,
-    VueSelect,
     CInputDateTime,
   },
 
diff --git a/client/web/compose/src/components/index.js b/client/web/compose/src/components/index.js
index aa4a6bf0b..6a5045019 100644
--- a/client/web/compose/src/components/index.js
+++ b/client/web/compose/src/components/index.js
@@ -59,3 +59,4 @@ Vue.component('c-resource-list', components.CResourceList)
 Vue.component('c-input-checkbox', components.CInputCheckbox)
 Vue.component('c-button-submit', components.CButtonSubmit)
 Vue.component('c-hint', components.CHint)
+Vue.component('c-input-select', components.CInputSelect)
diff --git a/client/web/compose/src/mixins/index.js b/client/web/compose/src/mixins/index.js
index 0b8262821..788c05488 100644
--- a/client/web/compose/src/mixins/index.js
+++ b/client/web/compose/src/mixins/index.js
@@ -2,10 +2,8 @@ import Vue from 'vue'
 
 import toast from './toast'
 import resourceTranslations from './resource-translations'
-import vueSelectPosition from './vue-select-position'
 import uiHelpers from './uiHelpers'
 
 Vue.mixin(toast)
 Vue.mixin(resourceTranslations)
-Vue.mixin(vueSelectPosition)
 Vue.mixin(uiHelpers)
diff --git a/client/web/compose/src/mixins/vue-select-position.js b/client/web/compose/src/mixins/vue-select-position.js
deleted file mode 100644
index 4973cffd7..000000000
--- a/client/web/compose/src/mixins/vue-select-position.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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()
-    },
-  },
-}
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 4b43c716f..16f3ae27e 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -84,68 +84,6 @@ th {
   transition: none !important;
 }
 
-.v-select {
-  min-width: auto;
-  position: relative;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  margin-bottom: 0;
-  font-size: 0.9rem;
-  border-radius: 0.25rem;
-
-  .vs__selected-options {
-    // do not allow growing
-    width: 0;
-  }
-
-  .vs__selected {
-    display: block;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    overflow: hidden;
-  }
-
-  .vs__search {
-    margin-top: 0.375rem;
-  }
-
-  &:not(.vs--open) .vs__selected + .vs__search {
-    // force this to not use any space
-    // we still need it to be rendered for the focus
-    width: 0;
-    padding: 0;
-    margin: 0;
-    border: none;
-    height: 0;
-  }
-
-  .vs__dropdown-toggle {
-    padding: 0.375rem;
-    padding-top: 0;
-    border-width: 2px;
-    border-color: var(--light);
-
-    .vs__selected {
-      margin-top: 0.375rem;
-    }
-
-    .vs__actions {
-      padding-top: 0.375rem;
-    }
-  }
-
-  .vs__clear,
-  .vs__open-indicator {
-    fill: var(--gray-900);
-    display: inline-flex;
-  }
-}
-
-.vs__dropdown-menu {
-  z-index: 1090;
-}
-
 .loader {
   height: calc(100vh - 2 * #{var(--opbar-height)});
   display: flex;
diff --git a/client/web/compose/src/themes/corteza-base/index.scss b/client/web/compose/src/themes/corteza-base/index.scss
index 6f3102919..f95cb83c1 100644
--- a/client/web/compose/src/themes/corteza-base/index.scss
+++ b/client/web/compose/src/themes/corteza-base/index.scss
@@ -1,4 +1,3 @@
 @import "./rtl.scss";
-@import "~vue-select/dist/vue-select.css";
 @import "./custom";
 @import "./poppins.scss";
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index 6156e441e..6e8fb8c03 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -96,15 +96,13 @@
                         label-class="text-primary"
                       >
                         <b-input-group class="d-flex w-100">
-                          <vue-select
+                          <c-input-select
                             v-model="chart.config.colorScheme"
                             :options="colorSchemes"
                             :reduce="cs => cs.id"
                             label="name"
                             :get-option-key="o => o.id"
                             :placeholder="$t('colorScheme.placeholder')"
-                            :calculate-position="calculateDropdownPosition"
-                            class="bg-white rounded"
                           >
                             <template #option="option">
                               <p
@@ -112,6 +110,7 @@
                               >
                                 {{ option.name }}
                               </p>
+
                               <div
                                 v-for="(color, index) in option.colors"
                                 :key="index"
@@ -134,7 +133,7 @@
                                 </b-button>
                               </li>
                             </template>
-                          </vue-select>
+                          </c-input-select>
 
                           <b-input-group-append v-if="showEditColorSchemeButton">
                             <b-button
@@ -443,7 +442,6 @@ import draggable from 'vuedraggable'
 import ReportItem from 'corteza-webapp-compose/src/components/Chart/ReportItem'
 import Reports from 'corteza-webapp-compose/src/components/Chart/Report'
 import { chartConstructor } from 'corteza-webapp-compose/src/lib/charts'
-import VueSelect from 'vue-select'
 import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 const { CInputCheckbox, CInputColorPicker } = components
@@ -466,7 +464,6 @@ export default {
     ChartComponent,
     draggable,
     ReportItem,
-    VueSelect,
     CInputCheckbox,
     CInputColorPicker,
   },
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index 90667a169..97dd0d6a0 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -216,7 +216,7 @@
                   <b-form-group class="w-100">
                     <table
                       data-test-id="table-module-fields"
-                      class="table table-sm table-borderless table-responsive-lg"
+                      class="table table-sm table-borderless table-responsive"
                     >
                       <thead>
                         <tr>
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 58dc922c9..7f7a04134 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -11,16 +11,14 @@
     </portal>
 
     <portal to="topbar-tools">
-      <b-form-select
+      <c-input-select
         v-if="layout && layouts.length > 1"
         ref="layoutSelect"
-        size="sm"
         :value="layout.pageLayoutID"
         :options="layouts"
-        value-field="pageLayoutID"
-        text-field="label"
+        :reduce="layout => layout.pageLayoutID"
         style="max-width: 300px;"
-        @change="setLayout"
+        @input="setLayout"
       />
 
       <b-button-group
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 11c48db65..16bb76578 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -537,7 +537,7 @@
         :label="$t('page-layout.roles.label')"
         label-class="text-primary"
       >
-        <vue-select
+        <c-input-select
           v-model="currentLayoutRoles"
           :options="roles.options"
           :loading="roles.processing"
@@ -545,9 +545,7 @@
           :get-option-label="role => role.name"
           :reduce="role => role.roleID"
           :selectable="role => !currentLayoutRoles.includes(role.roleID)"
-          append-to-body
           multiple
-          class="bg-white rounded"
         />
       </b-form-group>
 
@@ -952,7 +950,6 @@ import Uploader from 'corteza-webapp-compose/src/components/Public/Page/Attachme
 import Draggable from 'vuedraggable'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { handle } from '@cortezaproject/corteza-vue'
-import { VueSelect } from 'vue-select'
 
 export default {
   i18nOptions: {
@@ -967,7 +964,6 @@ export default {
     PageLayoutTranslator,
     Uploader,
     Draggable,
-    VueSelect,
   },
 
   mixins: [
diff --git a/client/web/compose/yarn.lock b/client/web/compose/yarn.lock
index 5af14709a..bfb22f39c 100644
--- a/client/web/compose/yarn.lock
+++ b/client/web/compose/yarn.lock
@@ -11748,11 +11748,6 @@ vue-router@3.1.5:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
   integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
 
-vue-select@^3.1.0:
-  version "3.11.2"
-  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.11.2.tgz#3ef93e3f2707e133c2df0b2920a05eea78764d18"
-  integrity sha512-pIOcY8ajWNSwg8Ns4eHVr5ZWwqKCSZeQRymTnlUI8i+3QiQXF6JIM4lylK6mVfbccs4S6vOyxB7zmJBpp7tDUg==
-
 vue-select@^3.4.0:
   version "3.18.3"
   resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.18.3.tgz#31f188d7181a4a86d07b937303c457efe863c4bc"
diff --git a/client/web/privacy/src/components/Requests/Editor/Correct.vue b/client/web/privacy/src/components/Requests/Editor/Correct.vue
index 0d1a3c068..e6d4e74bc 100644
--- a/client/web/privacy/src/components/Requests/Editor/Correct.vue
+++ b/client/web/privacy/src/components/Requests/Editor/Correct.vue
@@ -10,7 +10,7 @@
         label-class="text-primary"
         class="mb-0"
       >
-        <vue-select
+        <c-input-select
           v-model="connection"
           :disabled="processing.connections"
           :options="connections"
@@ -18,8 +18,6 @@
           :get-option-label="({ handle, meta }) => meta.name || handle"
           :get-option-key="getOptionKey"
           :placeholder="$t('connection.placeholder')"
-          :calculate-position="calculateDropdownPosition"
-          class="h-100 bg-white rounded"
         />
       </b-form-group>
     </b-card>
@@ -77,7 +75,6 @@
 <script>
 import EditorToolbar from 'corteza-webapp-privacy/src/components/Common/EditorToolbar'
 import ModuleRecords from 'corteza-webapp-privacy/src/components/Common/ModuleRecords'
-import VueSelect from 'vue-select'
 
 export default {
   i18nOptions: {
@@ -86,7 +83,6 @@ export default {
   },
 
   components: {
-    VueSelect,
     EditorToolbar,
     ModuleRecords,
   },
diff --git a/client/web/privacy/src/components/Requests/Editor/Delete.vue b/client/web/privacy/src/components/Requests/Editor/Delete.vue
index 9fe7ba729..c263ba3b1 100644
--- a/client/web/privacy/src/components/Requests/Editor/Delete.vue
+++ b/client/web/privacy/src/components/Requests/Editor/Delete.vue
@@ -10,7 +10,7 @@
         label-class="text-primary"
         class="mb-0"
       >
-        <vue-select
+        <c-input-select
           v-model="connection"
           :disabled="processing.connections"
           :options="connections"
@@ -18,8 +18,6 @@
           :get-option-label="({ handle, meta }) => meta.name || handle"
           :get-option-key="getOptionKey"
           :placeholder="$t('connection.placeholder')"
-          :calculate-position="calculateDropdownPosition"
-          class="h-100 bg-white rounded"
         />
       </b-form-group>
     </b-card>
@@ -83,7 +81,6 @@
 <script>
 import EditorToolbar from 'corteza-webapp-privacy/src/components/Common/EditorToolbar'
 import ModuleRecords from 'corteza-webapp-privacy/src/components/Common/ModuleRecords'
-import VueSelect from 'vue-select'
 
 export default {
   i18nOptions: {
@@ -92,7 +89,6 @@ export default {
   },
 
   components: {
-    VueSelect,
     EditorToolbar,
     ModuleRecords,
   },
diff --git a/client/web/privacy/src/components/index.js b/client/web/privacy/src/components/index.js
index 564ed1804..28cb8a1b5 100644
--- a/client/web/privacy/src/components/index.js
+++ b/client/web/privacy/src/components/index.js
@@ -10,3 +10,4 @@ Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
 Vue.component('c-button-submit', components.CButtonSubmit)
+Vue.component('c-input-select', components.CInputSelect)
diff --git a/client/web/privacy/src/mixins/index.js b/client/web/privacy/src/mixins/index.js
index 75be1ded0..f80c84cf9 100644
--- a/client/web/privacy/src/mixins/index.js
+++ b/client/web/privacy/src/mixins/index.js
@@ -1,7 +1,5 @@
 import Vue from 'vue'
 
 import toast from './toast'
-import vueSelectPosition from './vue-select-position'
 
 Vue.mixin(toast)
-Vue.mixin(vueSelectPosition)
diff --git a/client/web/privacy/src/mixins/vue-select-position.js b/client/web/privacy/src/mixins/vue-select-position.js
deleted file mode 100644
index 4973cffd7..000000000
--- a/client/web/privacy/src/mixins/vue-select-position.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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()
-    },
-  },
-}
diff --git a/client/web/privacy/src/themes/corteza-base/index.scss b/client/web/privacy/src/themes/corteza-base/index.scss
index 882742031..361912794 100644
--- a/client/web/privacy/src/themes/corteza-base/index.scss
+++ b/client/web/privacy/src/themes/corteza-base/index.scss
@@ -1,3 +1,2 @@
 @import "./custom";
-@import "~vue-select/dist/vue-select.css";
 @import "./poppins.scss";
diff --git a/client/web/privacy/src/views/Privacy/DataOverview/Application.vue b/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
index 22a9aa7b9..8f73acf37 100644
--- a/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
+++ b/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
@@ -14,16 +14,15 @@
         label-class="text-primary"
         class="mb-0"
       >
-        <vue-select
+        <c-input-select
           v-model="connection"
           :disabled="processing.connections"
           :options="connections"
           :clearable="false"
+          :reduce="o => o.connectionID"
           :placeholder="$t('connection.placeholder')"
-          :calculate-position="calculateDropdownPosition"
           :get-option-label="({ handle, meta }) => meta.name || handle"
           :get-option-key="getOptionKey"
-          class="h-100 bg-white rounded"
         />
       </b-form-group>
     </b-card>
@@ -36,7 +35,7 @@
     </div>
 
     <h5
-      v-else-if="!(connection && modules[connection.connectionID])"
+      v-else-if="!(connection && modules[connection])"
       class="text-center mt-5"
     >
       {{ $t('no-data-available') }}
@@ -45,7 +44,7 @@
     <module-records
       v-else
       v-slot="{ value }"
-      :modules="modules[connection.connectionID]"
+      :modules="modules[connection]"
     >
       <p
         v-for="(v, vi) in value.value"
@@ -68,7 +67,7 @@
           variant="light"
           size="lg"
           class="ml-1"
-          @click="$router.push({ name: 'request.create', params: { kind: 'delete', connection } })"
+          @click="$router.push({ name: 'request.create', params: { kind: 'delete', connectionObj } })"
         >
           {{ $t('request-deletion') }}
         </b-button>
@@ -79,7 +78,7 @@
           variant="primary"
           size="lg"
           class="ml-1"
-          @click="$router.push({ name: 'request.create', params: { kind: 'correct', connection } })"
+          @click="$router.push({ name: 'request.create', params: { kind: 'correct', connectionObj } })"
         >
           {{ $t('request-correction') }}
         </b-button>
@@ -91,7 +90,6 @@
 <script>
 import EditorToolbar from 'corteza-webapp-privacy/src/components/Common/EditorToolbar'
 import ModuleRecords from 'corteza-webapp-privacy/src/components/Common/ModuleRecords'
-import VueSelect from 'vue-select'
 
 export default {
   name: 'ApplicationDataOverview',
@@ -102,7 +100,6 @@ export default {
   },
 
   components: {
-    VueSelect,
     EditorToolbar,
     ModuleRecords,
   },
@@ -119,13 +116,17 @@ export default {
       connections: [],
 
       modules: {},
+
+      connectionObj: {},
     }
   },
 
   watch: {
     connection: {
-      handler ({ connectionID } = {}) {
+      handler (connectionID = '') {
+        console.log('connection', connectionID)
         this.fetchSensitiveData(connectionID)
+        this.connectionObj = this.connections.find(({ connectionID: id }) => id === connectionID) || {}
       },
     },
   },
@@ -141,7 +142,7 @@ export default {
       this.$SystemAPI.dataPrivacyConnectionList()
         .then(({ set = [] }) => {
           this.connections = set
-          this.connection = set[0]
+          this.connection = set[0].connectionID
         })
         .catch(this.toastErrorHandler(this.$t('notification:connection-load-failed')))
         .finally(() => {
@@ -150,6 +151,7 @@ export default {
     },
 
     fetchSensitiveData (connectionID) {
+      console.log('fetchSensitiveData', connectionID)
       if (connectionID) {
         this.processing.sensitiveData = true
 
diff --git a/client/web/privacy/yarn.lock b/client/web/privacy/yarn.lock
index f8a5a73b8..4e17f454b 100644
--- a/client/web/privacy/yarn.lock
+++ b/client/web/privacy/yarn.lock
@@ -11605,11 +11605,6 @@ vue-router@3.1.5:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
   integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
 
-vue-select@^3.12.2:
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.12.2.tgz#b0dd89233d673dcbee567418667b1bfd5c139b64"
-  integrity sha512-KWIXQ50pC+B1wpBmaUXwuHm8yevPIL8YsZin9Hi2qCdK7C0KMbztRk6adgpIJ99bqaiccrGFQIPuXsuUNeegPw==
-
 vue-select@^3.4.0:
   version "3.18.3"
   resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.18.3.tgz#31f188d7181a4a86d07b937303c457efe863c4bc"
diff --git a/client/web/reporter/package.json b/client/web/reporter/package.json
index df805867f..5d7d37290 100644
--- a/client/web/reporter/package.json
+++ b/client/web/reporter/package.json
@@ -36,7 +36,6 @@
     "vue-echarts": "^6.2.3",
     "vue-grid-layout": "^2.3.12",
     "vue-router": "3.1.5",
-    "vue-select": "^3.12.2",
     "vue-split-panel": "^1.0.4",
     "vue-swatches": "^2.1.1",
     "vuedraggable": "^2.24.3",
diff --git a/client/web/reporter/src/components/Common/ColumnSelector.vue b/client/web/reporter/src/components/Common/ColumnSelector.vue
index 94d607529..60c2600d3 100644
--- a/client/web/reporter/src/components/Common/ColumnSelector.vue
+++ b/client/web/reporter/src/components/Common/ColumnSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-select
+  <c-input-select
     key="name"
     :value="value"
     :options="columns"
@@ -8,19 +8,12 @@
     :placeholder="$t('general:label.none')"
     :reduce="r => r.name"
     append-to-body
-    :calculate-position="calculateDropdownPosition"
-    class="column-selector bg-white rounded"
     v-on="$listeners"
   />
 </template>
 
 <script>
-import { VueSelect } from 'vue-select'
-
 export default {
-  components: {
-    VueSelect,
-  },
 
   props: {
     columns: {
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
index 790b7b633..c56d37f24 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
@@ -49,19 +49,12 @@
             label-class="text-primary"
             class="mb-0"
           >
-            <vue-select
+            <c-input-select
               v-model="options.colorScheme"
               :options="colorSchemes"
               :get-option-key="getOptionKey"
               :reduce="cs => cs.value"
               :placeholder="$t('general:label.default')"
-              label="label"
-              option-text="label"
-              option-value="value"
-              clearable
-              :calculate-position="calculateDropdownPosition"
-              class="mw-100 rounded"
-              style="min-width: 100%;"
             >
               <template #option="option">
                 <p
@@ -69,6 +62,7 @@
                 >
                   {{ option.label }}
                 </p>
+
                 <div
                   v-for="(color, index) in option.colors"
                   :key="`${option.value}-${index}`"
@@ -76,7 +70,7 @@
                   class="d-inline-block color-box mr-1 mb-1"
                 />
               </template>
-            </vue-select>
+            </c-input-select>
 
             <template
               v-if="currentColorScheme"
@@ -581,13 +575,11 @@
 import base from './base'
 import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
 import ColumnPicker from 'corteza-webapp-reporter/src/components/Common/ColumnPicker'
-import VueSelect from 'vue-select'
 import { reporter, shared } from '@cortezaproject/corteza-js'
 const { colorschemes } = shared
 
 export default {
   components: {
-    VueSelect,
     ColumnSelector,
     ColumnPicker,
   },
diff --git a/client/web/reporter/src/components/Report/Datasources/Join.vue b/client/web/reporter/src/components/Report/Datasources/Join.vue
index 298fef0c4..201994b1a 100644
--- a/client/web/reporter/src/components/Report/Datasources/Join.vue
+++ b/client/web/reporter/src/components/Report/Datasources/Join.vue
@@ -41,6 +41,7 @@
           </b-form-select>
         </b-form-group>
       </b-col>
+
       <b-col cols="6">
         <b-form-group
           :label="$t('datasources:secondary.source')"
@@ -77,6 +78,7 @@
           />
         </b-form-group>
       </b-col>
+
       <b-col cols="6">
         <b-form-group
           v-if="step.join.foreignSource"
diff --git a/client/web/reporter/src/components/index.js b/client/web/reporter/src/components/index.js
index a356083eb..39fd9b3dd 100644
--- a/client/web/reporter/src/components/index.js
+++ b/client/web/reporter/src/components/index.js
@@ -18,6 +18,7 @@ import {
   RadarChart,
   FunnelChart,
 } from 'echarts/charts'
+
 import {
   TitleComponent,
   GridComponent,
@@ -51,3 +52,4 @@ Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
 Vue.component('c-button-submit', components.CButtonSubmit)
+Vue.component('c-input-select', components.CInputSelect)
diff --git a/client/web/reporter/src/mixins/index.js b/client/web/reporter/src/mixins/index.js
index 75be1ded0..f80c84cf9 100644
--- a/client/web/reporter/src/mixins/index.js
+++ b/client/web/reporter/src/mixins/index.js
@@ -1,7 +1,5 @@
 import Vue from 'vue'
 
 import toast from './toast'
-import vueSelectPosition from './vue-select-position'
 
 Vue.mixin(toast)
-Vue.mixin(vueSelectPosition)
diff --git a/client/web/reporter/src/mixins/vue-select-position.js b/client/web/reporter/src/mixins/vue-select-position.js
deleted file mode 100644
index 4973cffd7..000000000
--- a/client/web/reporter/src/mixins/vue-select-position.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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()
-    },
-  },
-}
diff --git a/client/web/reporter/src/themes/corteza-base/index.scss b/client/web/reporter/src/themes/corteza-base/index.scss
index 882742031..361912794 100644
--- a/client/web/reporter/src/themes/corteza-base/index.scss
+++ b/client/web/reporter/src/themes/corteza-base/index.scss
@@ -1,3 +1,2 @@
 @import "./custom";
-@import "~vue-select/dist/vue-select.css";
 @import "./poppins.scss";
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index a75b9eb4e..0b312a348 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -8,13 +8,11 @@
 
     <portal to="topbar-tools">
       <b-input-group style="max-width: 300px;">
-        <vue-select
+        <c-input-select
           v-model="scenarios.selected"
           :options="scenarioOptions"
           :get-option-key="getOptionKey"
           :placeholder="$t('builder:pick-scenario')"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
           @input="refreshReport()"
         />
 
@@ -396,7 +394,6 @@ import EditorToolbar from 'corteza-webapp-reporter/src/components/EditorToolbar'
 import DisplayElementConfigurator from 'corteza-webapp-reporter/src/components/Report/Blocks/DisplayElements/Configurators'
 import ScenarioConfigurator from 'corteza-webapp-reporter/src/components/Report/Scenarios'
 import * as displayElementThumbnails from 'corteza-webapp-reporter/src/assets/DisplayElements'
-import VueSelect from 'vue-select'
 import Prefilter from 'corteza-webapp-reporter/src/components/Common/Prefilter'
 
 export default {
@@ -410,7 +407,6 @@ export default {
     DisplayElementConfigurator,
     ScenarioConfigurator,
     EditorToolbar,
-    VueSelect,
     Prefilter,
   },
 
diff --git a/client/web/reporter/src/views/Report/View.vue b/client/web/reporter/src/views/Report/View.vue
index 6ef03413a..e988989c3 100644
--- a/client/web/reporter/src/views/Report/View.vue
+++ b/client/web/reporter/src/views/Report/View.vue
@@ -7,14 +7,13 @@
     </portal>
 
     <portal to="topbar-tools">
-      <vue-select
+      <c-input-select
         v-if="scenarioOptions.length"
         v-model="scenarios.selected"
         :options="scenarioOptions"
         :get-option-key="getOptionKey"
         :placeholder="$t('pick-scenario')"
-        :calculate-position="calculateDropdownPosition"
-        class="bg-white rounded mr-2"
+        class="mr-2"
         style="max-width: 300px;"
         @input="refreshReport()"
       />
@@ -71,7 +70,6 @@
 import { system } from '@cortezaproject/corteza-js'
 import Grid from 'corteza-webapp-reporter/src/components/Report/Grid'
 import Block from 'corteza-webapp-reporter/src/components/Report/Blocks'
-import VueSelect from 'vue-select'
 
 export default {
   name: 'ReportView',
@@ -83,7 +81,6 @@ export default {
   components: {
     Grid,
     Block,
-    VueSelect,
   },
 
   data () {
diff --git a/client/web/reporter/yarn.lock b/client/web/reporter/yarn.lock
index 7c1e2f2bd..b6c3d5b39 100644
--- a/client/web/reporter/yarn.lock
+++ b/client/web/reporter/yarn.lock
@@ -11609,11 +11609,6 @@ vue-router@3.1.5:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
   integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
 
-vue-select@^3.12.2:
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.12.2.tgz#b0dd89233d673dcbee567418667b1bfd5c139b64"
-  integrity sha512-KWIXQ50pC+B1wpBmaUXwuHm8yevPIL8YsZin9Hi2qCdK7C0KMbztRk6adgpIJ99bqaiccrGFQIPuXsuUNeegPw==
-
 vue-select@^3.4.0:
   version "3.18.3"
   resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.18.3.tgz#31f188d7181a4a86d07b937303c457efe863c4bc"
diff --git a/client/web/workflow/package.json b/client/web/workflow/package.json
index ce8467a07..e5dd2021a 100644
--- a/client/web/workflow/package.json
+++ b/client/web/workflow/package.json
@@ -27,7 +27,6 @@
     "v-jsoneditor": "^1.4.2",
     "vue": "2.6.14",
     "vue-router": "3.1.5",
-    "vue-select": "^3.11.2",
     "vue2-ace-editor": "^0.0.15",
     "vuedraggable": "^2.23.0",
     "vuex": "^3.6.2"
diff --git a/client/web/workflow/src/components/Configurator/Function.vue b/client/web/workflow/src/components/Configurator/Function.vue
index 94958a8e5..73401d9d7 100644
--- a/client/web/workflow/src/components/Configurator/Function.vue
+++ b/client/web/workflow/src/components/Configurator/Function.vue
@@ -25,7 +25,7 @@
           label-class="text-primary"
           class="mb-0"
         >
-          <vue-select
+          <c-input-select
             v-model="functionRef"
             :options="functionTypes"
             :get-option-key="getOptionTypeKey"
@@ -34,8 +34,6 @@
             :reduce="f => f.value"
             :filter="functionFilter"
             :placeholder="$t('steps:function.configurator.select-function')"
-            :calculate-position="calculateDropdownPosition"
-            class="bg-white rounded"
             @input="functionChanged"
           />
         </b-form-group>
@@ -105,14 +103,12 @@
                 v-if="(paramTypes[functionRef][a.target] || []).length > 1"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="a.type"
                   :options="(paramTypes[functionRef][a.target] || [])"
                   :get-option-key="getOptionParamKey"
                   :filter="argTypeFilter"
                   :clearable="false"
-                  :calculate-position="calculateDropdownPosition"
-                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -124,7 +120,7 @@
                 <div
                   v-if="a.valueType === 'value'"
                 >
-                  <vue-select
+                  <c-input-select
                     v-if="a.target === 'workflow'"
                     key="workflowID"
                     v-model="a.value"
@@ -132,15 +128,12 @@
                     :get-option-label="getWorkflowLabel"
                     :get-option-key="getOptionWorkflowKey"
                     :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"
                   />
 
-                  <vue-select
+                  <c-input-select
                     v-else-if="a.input.type === 'select'"
                     v-model="a.value"
                     :options="a.input.properties.options"
@@ -149,8 +142,6 @@
                     :filter="varFilter"
                     :reduce="a => a.value"
                     :placeholder="$t('steps:function.configurator.option-select')"
-                    :calculate-position="calculateDropdownPosition"
-                    class="bg-white rounded"
                     @input="$root.$emit('change-detected')"
                   />
 
@@ -327,14 +318,12 @@
 
 <script>
 import base from './base'
-import { VueSelect } from 'vue-select'
 import ExpressionEditor from '../ExpressionEditor.vue'
 import ExpressionTable from '../ExpressionTable.vue'
 import { objectSearchMaker, stringSearchMaker } from '../../lib/filter'
 
 export default {
   components: {
-    VueSelect,
     ExpressionEditor,
     ExpressionTable,
   },
diff --git a/client/web/workflow/src/components/Configurator/Trigger.vue b/client/web/workflow/src/components/Configurator/Trigger.vue
index 7cc7a91ba..439e33d1e 100644
--- a/client/web/workflow/src/components/Configurator/Trigger.vue
+++ b/client/web/workflow/src/components/Configurator/Trigger.vue
@@ -20,7 +20,7 @@
           :label="$t('steps:trigger.configurator.resource*')"
           label-class="text-primary"
         >
-          <vue-select
+          <c-input-select
             v-model="item.triggers.resourceType"
             :options="resourceTypeOptions"
             :get-option-key="getOptionTypeKey"
@@ -28,8 +28,6 @@
             :reduce="r => r.value"
             :filter="resTypeFilter"
             :placeholder="$t('steps:trigger.configurator.select-resource-type')"
-            :calculate-position="calculateDropdownPosition"
-            class="bg-white rounded"
             @input="resourceChanged"
           />
         </b-form-group>
@@ -39,7 +37,7 @@
           :label="$t('steps:trigger.configurator.event*')"
           label-class="text-primary"
         >
-          <vue-select
+          <c-input-select
             v-model="item.triggers.eventType"
             :options="eventTypeOptions"
             :get-option-key="getOptionEventTypeKey"
@@ -47,8 +45,6 @@
             :reduce="e => e.eventType"
             :filter="evtTypeFilter"
             :placeholder="$t('steps:trigger.configurator.select-event-type')"
-            :calculate-position="calculateDropdownPosition"
-            class="bg-white rounded"
             @input="eventChanged"
           />
         </b-form-group>
@@ -142,7 +138,7 @@
                 :label="$t('steps:trigger.configurator.resource')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="c.name"
                   :options="constraintNameTypes"
                   :get-option-key="getOptionTypeKey"
@@ -150,8 +146,6 @@
                   :reduce="c => c.value"
                   :filter="constrFilter"
                   :placeholder="$t('steps:trigger.configurator.select-constraint-type')"
-                  :calculate-position="calculateDropdownPosition"
-                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -160,15 +154,13 @@
                 :label="$t('steps:trigger.configurator.operator')"
                 label-class="text-primary"
               >
-                <vue-select
+                <c-input-select
                   v-model="c.op"
                   :options="constraintOperatorTypes"
                   :get-option-key="getOptionTypeKey"
                   label="text"
                   :reduce="c => c.value"
                   :placeholder="$t('steps:trigger.configurator.select-operator')"
-                  :calculate-position="calculateDropdownPosition"
-                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -285,7 +277,6 @@
 
 <script>
 import base from './base'
-import { VueSelect } from 'vue-select'
 import { components } from '@cortezaproject/corteza-vue'
 import { objectSearchMaker } from '../../lib/filter'
 const { CInputDateTime } = components
@@ -293,7 +284,6 @@ const { CInputDateTime } = components
 export default {
   components: {
     CInputDateTime,
-    VueSelect,
   },
 
   extends: base,
diff --git a/client/web/workflow/src/components/Configurator/Workflow.vue b/client/web/workflow/src/components/Configurator/Workflow.vue
index dd2a1f28f..fefc190f3 100644
--- a/client/web/workflow/src/components/Configurator/Workflow.vue
+++ b/client/web/workflow/src/components/Configurator/Workflow.vue
@@ -47,14 +47,12 @@
       :description="$t('workflow.not-setup-properly')"
       label-class="text-primary"
     >
-      <vue-select
-        :options="user.options"
+      <c-input-select
         data-test-id="select-run-as"
+        :options="user.options"
         :get-option-label="getOptionLabel"
         :get-option-key="getOptionKey"
         :value="user.value"
-        :calculate-position="calculateDropdownPosition"
-        class="bg-white rounded"
         @search="search"
         @input="updateRunAs"
       />
@@ -86,7 +84,6 @@
 
 <script>
 import { debounce } from 'lodash'
-import { VueSelect } from 'vue-select'
 import { handle } from '@cortezaproject/corteza-vue'
 
 export default {
@@ -94,10 +91,6 @@ export default {
     namespaces: 'configurator',
   },
 
-  components: {
-    VueSelect,
-  },
-
   props: {
     workflow: {
       type: Object,
diff --git a/client/web/workflow/src/components/ExpressionTable.vue b/client/web/workflow/src/components/ExpressionTable.vue
index 4a3f42702..c0261041f 100644
--- a/client/web/workflow/src/components/ExpressionTable.vue
+++ b/client/web/workflow/src/components/ExpressionTable.vue
@@ -83,15 +83,13 @@
                 label-class="text-primary"
                 :description="getTypeDescription(item.type)"
               >
-                <vue-select
+                <c-input-select
                   v-model="item.type"
                   :options="types"
                   :get-option-key="getOptionKey"
                   :clearable="false"
                   :filter="varFilter"
                   append-to-body
-                  :calculate-position="calculateDropdownPosition"
-                  class="bg-white rounded"
                   @input="$root.$emit('change-detected')"
                 />
               </b-form-group>
@@ -118,13 +116,11 @@
 <script>
 import ExpressionEditor from './ExpressionEditor.vue'
 import { objectSearchMaker } from '../lib/filter'
-import { VueSelect } from 'vue-select'
 import draggable from 'vuedraggable'
 
 export default {
   components: {
     ExpressionEditor,
-    VueSelect,
     draggable,
   },
 
diff --git a/client/web/workflow/src/components/index.js b/client/web/workflow/src/components/index.js
index a1f0ec19e..64c544926 100644
--- a/client/web/workflow/src/components/index.js
+++ b/client/web/workflow/src/components/index.js
@@ -10,3 +10,4 @@ Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
 Vue.component('c-button-submit', components.CButtonSubmit)
+Vue.component('c-input-select', components.CInputSelect)
diff --git a/client/web/workflow/src/mixins/index.js b/client/web/workflow/src/mixins/index.js
index 75be1ded0..f80c84cf9 100644
--- a/client/web/workflow/src/mixins/index.js
+++ b/client/web/workflow/src/mixins/index.js
@@ -1,7 +1,5 @@
 import Vue from 'vue'
 
 import toast from './toast'
-import vueSelectPosition from './vue-select-position'
 
 Vue.mixin(toast)
-Vue.mixin(vueSelectPosition)
diff --git a/client/web/workflow/src/mixins/vue-select-position.js b/client/web/workflow/src/mixins/vue-select-position.js
deleted file mode 100644
index 4973cffd7..000000000
--- a/client/web/workflow/src/mixins/vue-select-position.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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()
-    },
-  },
-}
diff --git a/client/web/workflow/src/themes/corteza-base/index.scss b/client/web/workflow/src/themes/corteza-base/index.scss
index b9776c07e..aceeb9639 100644
--- a/client/web/workflow/src/themes/corteza-base/index.scss
+++ b/client/web/workflow/src/themes/corteza-base/index.scss
@@ -1,4 +1,3 @@
 @import "./custom";
-@import "~vue-select/dist/vue-select.css";
 @import "./poppins.scss";
 @import "./mxgraph.scss";
diff --git a/client/web/workflow/yarn.lock b/client/web/workflow/yarn.lock
index b597fa24b..aafa83e74 100644
--- a/client/web/workflow/yarn.lock
+++ b/client/web/workflow/yarn.lock
@@ -11756,11 +11756,6 @@ vue-router@3.1.5:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
   integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
 
-vue-select@^3.11.2:
-  version "3.11.2"
-  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.11.2.tgz#3ef93e3f2707e133c2df0b2920a05eea78764d18"
-  integrity sha512-pIOcY8ajWNSwg8Ns4eHVr5ZWwqKCSZeQRymTnlUI8i+3QiQXF6JIM4lylK6mVfbccs4S6vOyxB7zmJBpp7tDUg==
-
 vue-select@^3.4.0:
   version "3.18.3"
   resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.18.3.tgz#31f188d7181a4a86d07b937303c457efe863c4bc"
diff --git a/lib/vue/package.json b/lib/vue/package.json
index f469f1010..f5fe7bfed 100644
--- a/lib/vue/package.json
+++ b/lib/vue/package.json
@@ -53,7 +53,7 @@
     "v-photoswipe": "^1.0.3-1",
     "vue-color": "^2.8.1",
     "vue-echarts": "^6.2.3",
-    "vue-select": "^3.4.0",
+    "vue-select": "3.20.2",
     "vue-swatches": "^1.0.4",
     "vue2-ace-editor": "^0.0.15",
     "vue2-leaflet": "^2.7.1",
diff --git a/lib/vue/src/components/index.ts b/lib/vue/src/components/index.ts
index c3f8d3da1..629453151 100644
--- a/lib/vue/src/components/index.ts
+++ b/lib/vue/src/components/index.ts
@@ -20,6 +20,7 @@ export {
   CInputColorPicker,
   CAceEditor,
   CButtonSubmit,
+  CInputSelect,
 } from './input'
 
 export {
diff --git a/lib/vue/src/components/input/CInputPresort.vue b/lib/vue/src/components/input/CInputPresort.vue
index 19a218825..3707a082a 100644
--- a/lib/vue/src/components/input/CInputPresort.vue
+++ b/lib/vue/src/components/input/CInputPresort.vue
@@ -30,22 +30,13 @@
             class="align-middle"
             style="min-width: 250px;"
           >
-            <b-form-select
+            <c-input-select
               v-model="column.field"
               :options="availableFields"
-              text-field="label"
-              value-field="name"
+              :reduce="o => o.name"
+              :placeholder="labels.none"
               class="rounded"
-            >
-              <template #first>
-                <b-form-select-option
-                  :value="undefined"
-                  disabled
-                >
-                  {{ labels.none }}
-                </b-form-select-option>
-              </template>
-            </b-form-select>
+            />
           </td>
 
           <td
@@ -117,10 +108,12 @@
 
 <script>
 import Draggable from 'vuedraggable'
+import CInputSelect from './CInputSelect.vue'
 
 export default {
   components: {
     Draggable,
+    CInputSelect,
   },
 
   props: {
diff --git a/lib/vue/src/components/input/CInputSelect.vue b/lib/vue/src/components/input/CInputSelect.vue
new file mode 100644
index 000000000..98cfaa36c
--- /dev/null
+++ b/lib/vue/src/components/input/CInputSelect.vue
@@ -0,0 +1,228 @@
+<template>
+  <vue-select
+    v-model="_value"
+    v-bind="$attrs"
+    :clearable="clearable"
+    :options="options"
+    :searchable="searchable"
+    :calculate-position="calculateDropdownPosition"
+    :append-to-body="appendToBody"
+    class="bg-white rounded"
+    :class="sizeClass"
+    v-on="$listeners"
+  >
+    <template
+      v-for="(_, name) in $scopedSlots"
+      v-slot:[name]="data"
+    >
+      <slot
+        :name="name"
+        v-bind="data"
+      />
+    </template>
+  </vue-select>
+</template>
+
+<script>
+import { VueSelect } from 'vue-select'
+import { createPopper } from '@popperjs/core'
+import 'vue-select/dist/vue-select.css';
+
+export default {
+  name: 'CInputSelect',
+
+  components: {
+    VueSelect,
+  },
+
+  props: {
+    value: {
+      type: [String, Array],
+      default: () => '',
+    },
+
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+
+    searchable: {
+      type: Boolean,
+      default: true,
+    },
+
+    appendToBody: {
+      type: Boolean,
+      default: true,
+    },
+
+    defaultValue: {
+      type: [String, Array],
+      default: () => '',
+    },
+
+    size: {
+      type: String,
+      default: 'md',
+    },
+  },
+
+  computed: {
+    _value: {
+      get () {
+        const fallbackValue = this.$attrs.multiple ? [] : ''
+        return !!this.defaultValue && (this.value === this.defaultValue) ? fallbackValue : this.value
+      },
+
+      set (v) {
+        this.$emit('input', !v ? this.defaultValue : v)
+      }
+    },
+
+    sizeClass () {
+      return this.size === 'sm' ? 'c-input-sm' : this.size === 'lg' ? 'c-input-lg' : ''
+    },
+  },
+
+  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()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+.v-select {
+  min-width: auto;
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  margin-bottom: 0;
+  font-size: .9rem;
+  border-radius: 0.25rem;
+
+  .vs__selected-options {
+    // do not allow growing
+    width: 0;
+  }
+
+  .vs__selected {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .vs__search {
+    margin-top: 0.375rem;
+  }
+
+  &:not(.vs--open) .vs__selected + .vs__search {
+    // force this to not use any space
+    // we still need it to be rendered for the focus
+    width: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    height: 0;
+  }
+
+  .vs__dropdown-toggle {
+    padding: 0.375rem;
+    padding-top: 0;
+    border-width: 2px;
+    border-color: var(--light);
+
+    .vs__selected {
+      margin-top: 0.375rem;
+    }
+
+    .vs__actions {
+      padding-top: 0.375rem;
+    }
+  }
+
+  .vs__clear,
+  .vs__open-indicator {
+    fill: var(--gray-900);
+    display: inline-flex;
+  }
+
+  .vs__clear {
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+    margin-right: 8px
+  }
+}
+
+.vs__dropdown-menu {
+  z-index: 1090;
+}
+
+.c-input-sm {
+  height: calc(1.5em + .5rem + 2px);
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+  padding-left: .5rem;
+  font-size: .875rem;
+}
+.c-input-lg {
+  height: calc(1.5em + 1rem + 2px);
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  padding-left: 1rem;
+  font-size: 1.25rem;
+}
+
+</style>
diff --git a/lib/vue/src/components/input/index.ts b/lib/vue/src/components/input/index.ts
index b7b65055b..479b7b21c 100644
--- a/lib/vue/src/components/input/index.ts
+++ b/lib/vue/src/components/input/index.ts
@@ -10,4 +10,5 @@ export { default as CInputColorPicker } from './CInputColorPicker.vue'
 export { default as CAceEditor } from './CAceEditor.vue'
 export {
   CButtonSubmit
-} from './button'
\ No newline at end of file
+} from './button'
+export { default as CInputSelect } from './CInputSelect.vue'
diff --git a/lib/vue/src/components/permissions/CPermissionsModal.vue b/lib/vue/src/components/permissions/CPermissionsModal.vue
index d0dc6a39a..a39c7c0cf 100644
--- a/lib/vue/src/components/permissions/CPermissionsModal.vue
+++ b/lib/vue/src/components/permissions/CPermissionsModal.vue
@@ -43,17 +43,16 @@
             :label="labels.edit.label"
             label-class="text-primary"
           >
-            <vue-select
-              v-model="currentRole"
+            <c-input-select
+              v-model="currentRoleID"
               data-test-id="select-user-list-roles"
               key="roleID"
               label="name"
               :clearable="false"
               :options="roles"
               :get-option-key="getOptionRoleKey"
+              :reduce="o => o.roleID"
               append-to-body
-              :calculate-position="calculateDropdownPosition"
-              class="h-100 bg-white rounded"
               @input="onRoleChange"
             />
           </b-form-group>
@@ -75,6 +74,7 @@
           >
             {{ n }}
           </label>
+
           <font-awesome-icon
             :icon="['fas', 'plus']"
             class="text-secondary rotate mt-1"
@@ -105,6 +105,7 @@
         style="min-height: 50vh;"
       >
         <b-spinner />
+
         <div>
           {{ labels.loading }}
         </div>
@@ -122,6 +123,7 @@
             :rules.sync="rules"
           />
         </b-col>
+
         <b-col
           v-for="(e, i) in evaluate"
           :key="i"
@@ -142,11 +144,13 @@
                 :icon="['fas', 'question']"
                 class="text-secondary"
               />
+
               <font-awesome-icon
                 v-else-if="r.access === 'allow'"
                 :icon="['fas', 'check']"
                 class="text-success"
               />
+
               <font-awesome-icon
                 v-else
                 :icon="['fas', 'times']"
@@ -191,7 +195,7 @@
         label-class="text-primary"
         class="mb-0"
       >
-        <vue-select
+        <c-input-select
           data-test-id="select-role"
           key="roleID"
           v-model="add.roleID"
@@ -202,8 +206,6 @@
           clearable
           :disabled="!!add.userID"
           :placeholder="labels.add.role.placeholder"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
         />
       </b-form-group>
 
@@ -212,7 +214,7 @@
         label-class="text-primary"
         class="mt-3 mb-0"
       >
-        <vue-select
+        <c-input-select
           data-test-id="select-user"
           key="userID"
           v-model="add.userID"
@@ -220,11 +222,10 @@
           :options="userOptions"
           :get-option-label="getUserLabel"
           :get-option-key="getOptionUserKey"
+          :reduce="o => o.userID"
           label="name"
           clearable
           :placeholder="labels.add.user.placeholder"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
           @search="searchUsers"
         />
       </b-form-group>
@@ -243,9 +244,8 @@
 </template>
 <script lang="js">
 import { modalOpenEventName, split } from './def.ts'
-import { VueSelect } from 'vue-select'
+import CInputSelect from '../input/CInputSelect.vue'
 import Rules from './form/Rules.vue'
-import calculateDropdownPosition from '../../mixins/vue-select-position'
 
 export default {
   i18nOptions: {
@@ -254,13 +254,9 @@ export default {
 
   components: {
     Rules,
-    VueSelect,
+    CInputSelect,
   },
 
-  mixins: [
-    calculateDropdownPosition
-  ],
-
   props: {
     labels: {
       required: false,
@@ -291,8 +287,7 @@ export default {
       // List of all available roles
       roles: [],
 
-      // Current role object
-      currentRole: undefined,
+      currentRoleID: undefined,
 
       evaluate: [],
 
@@ -370,8 +365,8 @@ export default {
       this.fetchPermissions().then(() => {
         if (!this.roles.length) {
           return this.fetchRoles()
-        } else if (this.currentRole) {
-          const { roleID } = this.currentRole
+        } else if (this.currentRoleID) {
+          const roleID = this.currentRoleID
           this.processing = true
 
           return this.fetchRules(roleID).then(() => {
@@ -404,7 +399,7 @@ export default {
       this.target = undefined
     },
 
-    onRoleChange ({ roleID }) {
+    onRoleChange (roleID) {
       this.fetchRules(roleID)
     },
 
@@ -412,7 +407,7 @@ export default {
       this.processing = true
 
       const rules = this.collectChangedRules()
-      const { roleID } = this.currentRole
+      const roleID = this.currentRoleID
 
       this.api.permissionsUpdate({ roleID, rules }).then(() => {
         this.fetchRules(roleID)
@@ -455,8 +450,8 @@ export default {
           .sort((a, b) => a.roleID.localeCompare(b.roleID))
 
         if (this.roles.length > 0) {
-          this.currentRole = this.roles[0]
-          this.onRoleChange(this.currentRole)
+          this.currentRoleID = this.roles[0].roleID
+          this.onRoleChange(this.currentRoleID)
         }
       }).finally(() => {
         this.processing = false
@@ -490,7 +485,7 @@ export default {
     },
 
     onAddEval () {
-      const { userID } = this.add.userID || {}
+      const userID = this.add.userID || {}
       let { roleID = [] } = this.add
       roleID = roleID.map(({ roleID }) => roleID)
 
@@ -513,9 +508,9 @@ export default {
       this.evaluate.splice(i, 1)
     },
 
-    getEvalName ({ roleID, userID }) {
+    getEvalName ({ userID, roleID }) {
       if (userID) {
-        const { name, username, email, handle } = userID
+        const { name, username, email, handle } = this.userOptions.find(({ userID: id }) => id === userID) || {}
         return [name || username || email || handle || userID || '']
       } else {
         return roleID.map(({ name }) => name)
@@ -615,7 +610,7 @@ export default {
       this.permissions = []
       this.rules = []
       this.roles = []
-      this.currentRole = undefined
+      this.currentRoleID = undefined
       this.evaluate = []
       this.add = {}
     },
diff --git a/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue b/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
index ce1b851c9..3e5f18b8b 100644
--- a/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
+++ b/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-select
+  <c-input-select
     data-test-id="select-sens-lvl"
     key="type"
     :value="_value"
@@ -10,26 +10,19 @@
     :placeholder="placeholder"
     :reduce="l => l.sensitivityLevelID"
     append-to-body
-    :calculate-position="calculateDropdownPosition"
-    class="bg-white rounded"
     @input="onInput"
   />
 </template>
 
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
-import { VueSelect } from 'vue-select'
-import calculateDropdownPosition from '../../mixins/vue-select-position'
+import CInputSelect from '../input/CInputSelect.vue'
 
 export default {
   components: {
-    VueSelect,
+    CInputSelect,
   },
 
-  mixins: [
-    calculateDropdownPosition
-  ],
-
   props: {
     value: {
       type: String,
diff --git a/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue b/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
index c80d97f81..133b0e11c 100644
--- a/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
+++ b/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
@@ -6,7 +6,7 @@
     <div
       class="text-center m-2"
     >
-      <vue-select
+      <c-input-select
         v-model="value"
         :options="options"
         :get-option-key="getOptionKey"
@@ -17,7 +17,7 @@
         option-text="label"
         placeholder="Select record"
         :filterable="false"
-        class="bg-white w-100 mb-3 rounded"
+        class="w-100 mb-3"
         @search="search"
       >
         <c-pagination
@@ -28,7 +28,7 @@
           @prev="goToPage(false)"
           @next="goToPage(true)"
         />
-      </vue-select>
+      </c-input-select>
 
       <b-button
         @click="$emit('submit', { value: encodeValue() })"
@@ -43,7 +43,7 @@
 import base from './base.vue'
 import CPagination from '../common/CPagination.vue'
 import { pVal } from '../utils.ts'
-import { VueSelect } from 'vue-select'
+import CInputSelect from '../../input/CInputSelect.vue'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { createPopper } from '@popperjs/core'
 import { debounce } from 'lodash'
@@ -53,7 +53,7 @@ export default {
   name: 'c-prompt-compose-record-picker',
 
   components: {
-    VueSelect,
+    CInputSelect,
     CPagination,
   },
 
diff --git a/lib/vue/yarn.lock b/lib/vue/yarn.lock
index 8574f082e..31d4aa9da 100644
--- a/lib/vue/yarn.lock
+++ b/lib/vue/yarn.lock
@@ -11346,10 +11346,10 @@ vue-runtime-helpers@^1.1.2:
   resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz#446b7b820888ab0c5264d2c3a32468e72e4100f3"
   integrity sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q==
 
-vue-select@^3.4.0:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.16.0.tgz#db2ee2ddf80bd8876ce57738107b8a1a741862f4"
-  integrity sha512-F0x7HXTUc5eq7YSjR0uX77RGA+Yk2+I8aMW+NePyPqRX9OPSiDtKpezFIFhnhxqrOvMh4uVR0jHkXIDmzs6nYQ==
+vue-select@3.20.2:
+  version "3.20.2"
+  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.20.2.tgz#eaa15012b032c154d4fb51ac82ebeda2beeae54b"
+  integrity sha512-ZSzIDzyYsWZULGUxVp1h6u3yi9IZQBWX8r6kSudUI/I5J1HQKpBjRntvkrg6pr87xmm16kdChvHCDN+W84vTKw==
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"