Add getOptionKey property to all vue-selects

2023-04-06 22:12:11 +03:00
parent f14d3a0c4a
commit 779367eafe
34 changed files with 227 additions and 2 deletions
--- a/client/web/admin/src/components/Apigw/CFilterParams.vue
+++ b/client/web/admin/src/components/Apigw/CFilterParams.vue
@@ -36,6 +36,7 @@
            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')"
            class="bg-white"
@@ -205,5 +206,11 @@ export default {
        })
    }
  },
+
+  methods: {
+    getOptionKey ({ workflowID }) {
+      return workflowID
+    },
+  },
 }
 </script>
--- a/client/web/admin/src/components/Permissions/CPermissionClone.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionClone.vue
@@ -31,6 +31,7 @@
          data-test-id="select-role-list"
          label="name"
          :options="roles"
+          :get-option-key="getOptionKey"
          :reduce="role => role.roleID"
          :loading="processingRoles"
          multiple
@@ -102,6 +103,10 @@ export default {
          this.showModal = false
        })
    },
+
+    getOptionKey ({ roleID }) {
+      return roleID
+    },
  },
 }
 </script>
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -226,6 +226,7 @@
          v-model="add.roleID"
          :data-test-id="`select-${add.mode}-roles`"
          :options="availableRoles"
+          :get-option-key="getOptionRoleKey"
          :multiple="add.mode === 'eval'"
          label="name"
          clearable
@@ -246,6 +247,7 @@
          v-model="add.userID"
          :data-test-id="`select-${add.mode}-users`"
          :disabled="!!add.roleID.length"
+          :get-option-key="getOptionUserKey"
          :options="userOptions"
          :get-option-label="getUserLabel"
          label="name"
@@ -493,6 +495,14 @@ export default {
    onHideRole (role) {
      this.$emit('hide', role)
    },
+
+    getOptionRoleKey ({ roleID }) {
+      return roleID
+    },
+
+    getOptionUserKey ({ userID }) {
+      return userID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/Admin/Module/DalSettings.vue
+++ b/client/web/compose/src/components/Admin/Module/DalSettings.vue
@@ -10,6 +10,7 @@
      <vue-select
        v-model="module.config.dal.connectionID"
        :options="connections"
+        :get-option-key="getOptionKey"
        :disabled="processing"
        :clearable="false"
        :reduce="s => s.connectionID"
@@ -258,6 +259,10 @@ export default {
        return enc
      }, {})
    },
+
+    getOptionKey ({ connectionID }) {
+      return connectionID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/Admin/Module/UniqueValues.vue
+++ b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -82,6 +82,7 @@
              v-model="rule.currentField"
              :placeholder="$t('searchFields')"
              :get-option-label="getOptionLabel"
+              :get-option-key="getOptionKey"
              :options="filterFieldOptions(rule)"
              :calculate-position="calculateDropdownPosition"
              class="bg-white"
@@ -211,6 +212,10 @@ export default {
    getOptionLabel ({ kind, label, name }) {
      return label || name || kind
    },
+
+    getOptionKey ({ fieldID }) {
+      return fieldID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/Common/RecordListFilter.vue
+++ b/client/web/compose/src/components/Common/RecordListFilter.vue
@@ -66,6 +66,7 @@
                    <vue-select
                      v-model="filter.name"
                      :options="fieldOptions"
+                      :get-option-key="getOptionKey"
                      :clearable="false"
                      :placeholder="$t('recordList.filter.fieldPlaceholder')"
                      option-value="name"
@@ -632,6 +633,10 @@ export default {
    isBetweenOperator (op) {
      return ['BETWEEN', 'NOT BETWEEN'].includes(op)
    },
+
+    getOptionKey ({ name }) {
+      return name
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/ModuleFields/Configurator/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/User.vue
@@ -13,6 +13,7 @@
      <vue-select
        v-model="f.options.roles"
        :options="roleOptions"
+        :get-option-key="getOptionKey"
        :reduce="role => role.roleID"
        option-value="roleID"
        option-text="name"
@@ -70,5 +71,11 @@ export default {
      this.roleOptions = roles
    })
  },
+
+  methods: {
+    getOptionKey ({ roleID }) {
+      return roleID
+    },
+  },
 }
 </script>
--- a/client/web/compose/src/components/ModuleFields/Editor/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -41,6 +41,7 @@
          v-if="field.options.selectType === 'multiple'"
          v-model="multipleSelected"
          :options="options"
+          :get-option-key="getOptionKey"
          :disabled="!module"
          :loading="processing"
          option-value="recordID"
@@ -69,6 +70,7 @@
          v-else
          ref="singleSelect"
          :options="options"
+          :get-option-key="getOptionKey"
          :disabled="!module"
          :loading="processing"
          option-value="recordID"
@@ -98,6 +100,7 @@
        <vue-select
          v-if="field.options.selectType === 'each'"
          :options="options"
+          :get-option-key="getOptionKey"
          :disabled="!module"
          :loading="processing"
          option-value="recordID"
@@ -139,6 +142,7 @@
      <vue-select
        v-model="selected"
        :options="options"
+        :get-option-key="getOptionKey"
        :disabled="!module"
        :loading="processing"
        option-value="recordID"
@@ -498,6 +502,10 @@ export default {
    goToPage (next = true) {
      this.filter.pageCursor = next ? this.filter.nextPage : this.filter.prevPage
    },
+
+    getOptionKey ({ value }) {
+      return value
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
+++ b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
@@ -9,6 +9,7 @@
        class="namespace-selector sticky-top bg-white mt-2"
        :clearable="false"
        :options="filteredNamespaces"
+        :get-option-key="getOptionKey"
        :value="namespace"
        :selectable="option => option.namespaceID !== namespace.namespaceID"
        :placeholder="$t('pickNamespace')"
@@ -420,6 +421,10 @@ export default {
        }
      })
    },
+
+    getOptionKey ({ namespaceID }) {
+      return namespaceID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -56,6 +56,7 @@
          data-test-id="select-assignee"
          :options="assignees"
          :get-option-label="getUserLabel"
+          :get-option-key="getOptionKey"
          :loading="processingUsers"
          :placeholder="$t('field.kind.user.suggestionPlaceholder')"
          :calculate-position="calculateDropdownPosition"
@@ -187,6 +188,10 @@ export default {

      return name || username || email || `<@${userID}>`
    },
+
+    getOptionKey ({ userID }) {
+      return userID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
@@ -7,6 +7,7 @@
        <vue-select
          v-model="block.options.chartID"
          :options="charts"
+          :get-option-key="getOptionKey"
          :placeholder="$t('chart.pick')"
          :reduce="option => option.chartID"
          :calculate-position="calculateDropdownPosition"
@@ -47,6 +48,7 @@
        <vue-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"
@@ -120,6 +122,10 @@ export default {
        blockID: '',
      }
    },
+
+    getOptionKey ({ chartID }) {
+      return chartID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
@@ -179,6 +179,7 @@
                  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"
@@ -193,6 +194,7 @@
                  :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"
@@ -415,6 +417,14 @@ export default {
    isTemporalField (name) {
      return !!this.fields.find(f => f.name === name && f.kind === 'DateTime')
    },
+
+    getOptionMetricFieldKey ({ name }) {
+      return name
+    },
+
+    getOptionAggregationOperationKey ({ operation }) {
+      return operation
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -17,6 +17,7 @@
          :placeholder="$t('navigation.none')"
          :options="tree"
          append-to-body
+          :get-option-key="getOptionKey"
          label="title"
          :calculate-position="calculateDropdownPosition"
          :reduce="f => f.pageID"
@@ -111,6 +112,10 @@ export default {
        this.options.item.label = composePage ? composePage.title : ''
      }
    },
+
+    getOptionKey ({ pageID }) {
+      return pageID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
@@ -36,6 +36,7 @@
              label="name"
              :placeholder="$t('progress.module.select')"
              :options="modules"
+              :get-option-key="getOptionModuleKey"
              :reduce="m => m.moduleID"
              :calculate-position="calculateDropdownPosition"
              class="bg-white"
@@ -77,6 +78,7 @@
                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"
@@ -98,6 +100,7 @@
                :disabled="!options.value.field || options.value.field === 'count'"
                :placeholder="$t('progress.aggregate.select')"
                :options="aggregationOperations"
+                :get-option-key="getOptionAggregationOperationKey"
                :reduce="a => a.operation"
                :calculate-position="calculateDropdownPosition"
                class="bg-white"
@@ -143,6 +146,7 @@
              label="name"
              :placeholder="$t('progress.module.select')"
              :options="modules"
+              :get-option-key="getOptionModuleKey"
              :reduce="m => m.moduleID"
              :calculate-position="calculateDropdownPosition"
              class="bg-white"
@@ -184,6 +188,7 @@
                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"
@@ -205,6 +210,7 @@
                :disabled="!options.minValue.field || options.minValue.field === 'count'"
                :placeholder="$t('progress.aggregate.select')"
                :options="aggregationOperations"
+                :get-option-key="getOptionAggregationOperationKey"
                :reduce="a => a.operation"
                :calculate-position="calculateDropdownPosition"
                class="bg-white"
@@ -250,6 +256,7 @@
              label="name"
              :placeholder="$t('progress.module.select')"
              :options="modules"
+              :get-option-key="getOptionModuleKey"
              :reduce="m => m.moduleID"
              :calculate-position="calculateDropdownPosition"
              class="bg-white"
@@ -291,6 +298,7 @@
                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"
@@ -312,6 +320,7 @@
                :disabled="!options.maxValue.field || options.maxValue.field === 'count'"
                :placeholder="$t('progress.aggregate.select')"
                :options="aggregationOperations"
+                :get-option-key="getOptionAggregationOperationKey"
                :reduce="a => a.operation"
                :calculate-position="calculateDropdownPosition"
                class="bg-white"
@@ -658,6 +667,18 @@ export default {
        optionsType.operation = ''
      }
    },
+
+    getOptionModuleKey ({ moduleID }) {
+      return moduleID
+    },
+
+    getOptionModuleFieldKey ({ name }) {
+      return name
+    },
+
+    getOptionAggregationOperationKey ({ operation }) {
+      return operation
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -37,6 +37,7 @@
            v-model="options.referenceField"
            :options="recordSelectorFields"
            :get-option-label="getFieldLabel"
+            :get-option-key="getOptionKey"
            :placeholder="$t('record.referenceRecordFieldPlaceholder')"
            :reduce="field => field.fieldID"
            :calculate-position="calculateDropdownPosition"
@@ -132,6 +133,7 @@
                :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="field-selector bg-white"
@@ -274,6 +276,10 @@ export default {
      return label || name
    },

+    getOptionKey ({ fieldID }) {
+      return fieldID
+    },
+
    updateReferenceModule (fieldID, fields) {
      if (!fieldID) {
        this.block.options.fields = []
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -314,6 +314,7 @@
                        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"
@@ -916,6 +917,10 @@ export default {
        roles: [],
      })
    },
+
+    getOptionKey ({ roleID }) {
+      return roleID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -155,6 +155,7 @@
                :options="blockOptions"
                :placeholder="$t('tabs.placeholder.block')"
                :get-option-label="getBlockLabel"
+                :get-option-key="getOptionKey"
                :selectable="option => isSelectable(option)"
                :reduce="option => option.value"
                :calculate-position="calculateDropdownPosition"
@@ -356,6 +357,10 @@ export default {
    getBlockLabel ({ title, kind }) {
      return title || kind
    },
+
+    getOptionKey ({ blockID }) {
+      return blockID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
+++ b/client/web/compose/src/components/Public/Record/BulkEdit/index.vue
@@ -52,6 +52,7 @@
          v-model="selectedField"
          :placeholder="getFieldSelectorPlaceholder"
          :get-option-label="getFieldLabel"
+          :get-option-key="getOptionKey"
          :options="moduleFields"
          append-to-body
          :calculate-position="calculateDropdownPosition"
@@ -260,6 +261,10 @@ export default {

      return !expressions.value
    },
+
+    getOptionKey ({ fieldID }) {
+      return fieldID
+    },
  },
 }
 </script>
--- a/client/web/compose/src/components/Public/Record/Exporter/Configurator.vue
+++ b/client/web/compose/src/components/Public/Record/Exporter/Configurator.vue
@@ -30,8 +30,9 @@
        v-if="forTimezone"
        v-model="exportTimezone"
        :options="timezones"
-        class="bg-white"
+        :get-option-key="getOptionKey"
        :placeholder="$t('recordList.export.timezonePlaceholder')"
+        class="bg-white"
      />
    </b-form-group>

@@ -644,6 +645,10 @@ export default {
          })
      }
    },
+
+    getOptionKey ({ tzCode }) {
+      return tzCode
+    },
  },
 }
 </script>
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -73,6 +73,7 @@
                      <vue-select
                        v-model="chart.config.colorScheme"
                        :options="colorSchemes"
+                        :get-option-key="getOptionKey"
                        :reduce="cs => cs.value"
                        label="label"
                        option-text="label"
@@ -546,6 +547,10 @@ export default {
    onAddReport () {
      this.reports.push(this.chart.defReport())
    },
+
+    getOptionKey ({ value }) {
+      return value
+    },
  },
 }
 </script>
--- a/client/web/privacy/src/components/Requests/Editor/Correct.vue
+++ b/client/web/privacy/src/components/Requests/Editor/Correct.vue
@@ -16,6 +16,7 @@
          :options="connections"
          :clearable="false"
          :get-option-label="({ handle, meta }) => meta.name || handle"
+          :get-option-key="getOptionKey"
          :placeholder="$t('connection.placeholder')"
          class="h-100 bg-white"
        />
@@ -203,6 +204,10 @@ export default {
        this.valid = true
      }
    },
+
+    getOptionKey ({ connectionID }) {
+      return connectionID
+    },
  },
 }
 </script>
--- a/client/web/privacy/src/components/Requests/Editor/Delete.vue
+++ b/client/web/privacy/src/components/Requests/Editor/Delete.vue
@@ -16,6 +16,7 @@
          :options="connections"
          :clearable="false"
          :get-option-label="({ handle, meta }) => meta.name || handle"
+          :get-option-key="getOptionKey"
          :placeholder="$t('connection.placeholder')"
          class="h-100 bg-white"
        />
@@ -209,6 +210,10 @@ export default {
        this.valid = true
      }
    },
+
+    getOptionKey ({ connectionID }) {
+      return connectionID
+    },
  },
 }
 </script>
--- a/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
+++ b/client/web/privacy/src/views/Privacy/DataOverview/Application.vue
@@ -21,6 +21,7 @@
          :clearable="false"
          :placeholder="$t('connection.placeholder')"
          :get-option-label="({ handle, meta }) => meta.name || handle"
+          :get-option-key="getOptionKey"
          class="h-100 bg-white"
        />
      </b-form-group>
@@ -161,6 +162,10 @@ export default {
          })
      }
    },
+
+    getOptionKey ({ connectionID }) {
+      return connectionID
+    },
  },
 }
 </script>
--- a/client/web/reporter/src/components/Common/ColumnSelector.vue
+++ b/client/web/reporter/src/components/Common/ColumnSelector.vue
@@ -4,6 +4,7 @@
    :value="value"
    :options="columns"
    :get-option-label="getColumnLabel"
+    :get-option-key="getOptionKey"
    :placeholder="$t('general:label.none')"
    :reduce="r => r.name"
    append-to-body
@@ -36,6 +37,10 @@ export default {
    getColumnLabel ({ name, label }) {
      return `${label} (${name})`
    },
+
+    getOptionKey ({ name }) {
+      return name
+    },
  },
 }
 </script>
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
@@ -52,6 +52,7 @@
            <vue-select
              v-model="options.colorScheme"
              :options="colorSchemes"
+              :get-option-key="getOptionKey"
              :reduce="cs => cs.value"
              :placeholder="$t('general:label.default')"
              label="label"
@@ -713,6 +714,10 @@ export default {
    typeChanged (type) {
      this.options = reporter.ChartOptionsMaker({ ...this.options, type })
    },
+
+    getOptionKey ({ value }) {
+      return value
+    },
  },
 }
 </script>
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -17,6 +17,7 @@
          <vue-select
            v-model="scenarios.selected"
            :options="scenarioOptions"
+            :get-option-key="getOptionKey"
            :placeholder="$t('builder:pick-scenario')"
            class="bg-white rounded"
            @input="refreshReport()"
@@ -914,6 +915,10 @@ export default {
      this.scenarios.currentIndex = this.reportScenarios.length ? 0 : undefined
      this.setCurrentScenario(this.scenarios.currentIndex)
    },
+
+    getOptionKey (scenario) {
+      return scenario
+    },
  },
 }
 </script>
--- a/client/web/reporter/src/views/Report/View.vue
+++ b/client/web/reporter/src/views/Report/View.vue
@@ -14,6 +14,7 @@
        <vue-select
          v-model="scenarios.selected"
          :options="scenarioOptions"
+          :get-option-key="getOptionKey"
          :placeholder="$t('pick-scenario')"
          class="bg-white rounded"
          @input="refreshReport()"
@@ -183,6 +184,10 @@ export default {
          this.processing = false
        })
    },
+
+    getOptionKey (scenario) {
+      return scenario
+    },
  },
 }
 </script>
--- a/client/web/workflow/src/components/Configurator/Function.vue
+++ b/client/web/workflow/src/components/Configurator/Function.vue
@@ -28,6 +28,7 @@
          <vue-select
            v-model="functionRef"
            :options="functionTypes"
+            :get-option-key="getOptionTypeKey"
            label="text"
            :selectable="f => !f.disabled"
            :reduce="f => f.value"
@@ -105,6 +106,7 @@
                <vue-select
                  v-model="a.type"
                  :options="(paramTypes[functionRef][a.target] || [])"
+                  :get-option-key="getOptionParamKey"
                  :filter="argTypeFilter"
                  :clearable="false"
                  @input="$root.$emit('change-detected')"
@@ -124,6 +126,7 @@
                    v-model="a.value"
                    :options="workflowOptions"
                    :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')"
@@ -136,6 +139,7 @@
                    v-else-if="a.input.type === 'select'"
                    v-model="a.value"
                    :options="a.input.properties.options"
+                    :get-option-key="getOptionTypeKey"
                    label="text"
                    :filter="varFilter"
                    :reduce="a => a.value"
@@ -658,6 +662,18 @@ export default {

      return typeDescriptions[type]
    },
+
+    getOptionTypeKey ({ value }) {
+      return value
+    },
+
+    getOptionEWorkflowLabelKey ({ workflowID }) {
+      return workflowID
+    },
+
+    getOptionParamKey (type) {
+      return type
+    },
  },
 }
 </script>
--- a/client/web/workflow/src/components/Configurator/Trigger.vue
+++ b/client/web/workflow/src/components/Configurator/Trigger.vue
@@ -23,6 +23,7 @@
          <vue-select
            v-model="item.triggers.resourceType"
            :options="resourceTypeOptions"
+            :get-option-key="getOptionTypeKey"
            label="text"
            :reduce="r => r.value"
            :filter="resTypeFilter"
@@ -39,6 +40,7 @@
          <vue-select
            v-model="item.triggers.eventType"
            :options="eventTypeOptions"
+            :get-option-key="getOptionEventTypeKey"
            label="eventType"
            :reduce="e => e.eventType"
            :filter="evtTypeFilter"
@@ -142,6 +144,7 @@
                <vue-select
                  v-model="c.name"
                  :options="constraintNameTypes"
+                  :get-option-key="getOptionTypeKey"
                  label="text"
                  :reduce="c => c.value"
                  :filter="constrFilter"
@@ -157,6 +160,7 @@
                <vue-select
                  v-model="c.op"
                  :options="constraintOperatorTypes"
+                  :get-option-key="getOptionTypeKey"
                  label="text"
                  :reduce="c => c.value"
                  :placeholder="$t('steps:trigger.configurator.select-operator')"
@@ -480,6 +484,14 @@ export default {
        this.$emit('update-default-value', { value, force: !this.item.node.value })
      }
    },
+
+    getOptionTypeKey ({ value }) {
+      return value
+    },
+
+    getOptionEventTypeKey ({ eventType }) {
+      return eventType
+    },
  },
 }
 </script>
--- a/client/web/workflow/src/components/Configurator/Workflow.vue
+++ b/client/web/workflow/src/components/Configurator/Workflow.vue
@@ -47,6 +47,7 @@
        :options="user.options"
        data-test-id="select-run-as"
        :get-option-label="getOptionLabel"
+        :get-option-key="getOptionKey"
        :value="user.value"
        @search="search"
        @input="updateRunAs"
--- a/client/web/workflow/src/components/ExpressionTable.vue
+++ b/client/web/workflow/src/components/ExpressionTable.vue
@@ -69,6 +69,7 @@
          <vue-select
            v-model="item.type"
            :options="types"
+            :get-option-key="getOptionKey"
            :clearable="false"
            :filter="varFilter"
            @input="$root.$emit('change-detected')"
@@ -139,6 +140,10 @@ export default {

      return typeDescriptions[type]
    },
+
+    getOptionKey (type) {
+      return type
+    },
  },
 }
 </script>
--- a/lib/vue/src/components/permissions/CPermissionsModal.vue
+++ b/lib/vue/src/components/permissions/CPermissionsModal.vue
@@ -54,6 +54,7 @@
              label="name"
              :clearable="false"
              :options="roles"
+              :get-option-key="getOptionRoleKey"
              append-to-body
              class="h-100 bg-white"
              @input="onRoleChange"
@@ -183,6 +184,7 @@
          key="roleID"
          v-model="add.roleID"
          :options="roles"
+          :get-option-key="getOptionRoleKey"
          label="name"
          multiple
          clearable
@@ -204,6 +206,7 @@
          :disabled="!!add.roleID.length"
          :options="userOptions"
          :get-option-label="getUserLabel"
+          :get-option-key="getOptionUserKey"
          label="name"
          clearable
          :placeholder="labels.add.user.placeholder"
@@ -558,6 +561,14 @@ export default {

      return this.$t(`permissions:ui.tooltip.unknown-context.${isUser ? 'user' : 'role'}`)
    },
+
+    getOptionRoleKey ({ roleID }) {
+      return roleID
+    },
+
+    getOptionUserKey ({ userID }) {
+      return userID
+    },
  },
 }
 </script>
--- a/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
+++ b/lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
@@ -5,6 +5,7 @@
    :disabled="_disabled"
    :options="sensitivityLevels"
    :get-option-label="getLabel"
+    :get-option-key="getOptionKey"
    :placeholder="placeholder"
    :reduce="l => l.sensitivityLevelID"
    append-to-body
@@ -95,7 +96,11 @@ export default {

    onInput (sensitivityLevelID) {
      this.$emit('input', sensitivityLevelID ? sensitivityLevelID : NoID)
-    }
+    },
+
+    getOptionKey ({ sensitivityLevelID }) {
+      return sensitivityLevelID
+    },
  }
 }
 </script>
--- a/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
+++ b/lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
@@ -9,6 +9,7 @@
      <vue-select
        v-model="value"
        :options="options"
+        :get-option-key="getOptionKey"
        :loading="processing"
        append-to-body
        :calculate-position="calculatePosition"
@@ -287,6 +288,10 @@ export default {
    goToPage (next = true) {
      this.filter.pageCursor = next ? this.filter.nextPage : this.filter.prevPage
    },
+
+    getOptionKey ({ recordID }) {
+      return recordID
+    },
  },
 }
 </script>