Merge pull request #12932 from owncloud/chore/backport-oc-select-fix

chore: backport oc-select fix

Author: LukasHirt

packages/design-system/src/components/OcSelect/OcSelect.spec.ts

@@ -58,6 +58,17 @@ describe('OcSelect', () => {
         options[0].customLabel
       )
     })
+    it('displays with a custom label function', () => {
+      const options = [{ customLabel: 'label1' }, { customLabel: 'label2' }]
+      const wrapper = getWrapper<(typeof options)[0]>({
+        options,
+        modelValue: options[0],
+        getOptionLabel: (o) => o.customLabel
+      })
+      expect(wrapper.findAll(selectors.selectedOptions).at(0).text()).toEqual(
+        options[0].customLabel
+      )
+    })
     it('can be cleared if multi-select is allowed', () => {
       const options = [{ label: 'label1' }, { label: 'label2' }]
       const wrapper = getWrapper({ options, modelValue: options[0], multiple: true })
@@ -87,9 +98,13 @@ describe('OcSelect', () => {
   })
 })
 
-function getWrapper(
+function getWrapper<T>(
   props: Partial<
-    PartialComponentProps<typeof OcSelect> & { options: unknown[]; modelValue: unknown }
+    Omit<PartialComponentProps<typeof OcSelect>, 'getOptionLabel'> & {
+      options: T[]
+      getOptionLabel: (o: T) => string
+      modelValue: T
+    }
   > = {}
 ) {
   return mount(OcSelect, {

packages/design-system/src/components/OcSelect/OcSelect.vue

@@ -166,6 +166,7 @@ interface Props {
   labelHidden?: boolean
   contextualHelper?: ContextualHelper | null
   optionLabel?: string
+  getOptionLabel?: (option: unknown) => string
   searchable?: boolean
   clearable?: boolean
   loading?: boolean
@@ -218,6 +219,7 @@ const {
   labelHidden = false,
   contextualHelper = null,
   optionLabel = 'label',
+  getOptionLabel: getOptionLabelProp = null,
   searchable = true,
   clearable = false,
   loading = false,
@@ -234,21 +236,7 @@ const emit = defineEmits<Emits>()
 const { $gettext } = useGettext()
 const select: VNodeRef = ref()
 const attrs = useAttrs()
-const getOptionLabel = (option: string | Record<string, unknown>): string => {
-  if (typeof option === 'object') {
-    const key = optionLabel || label
-    if (!Object.hasOwn(option, key)) {
-      console.warn(
-        `[vue-select warn]: Label key "option.${key}" does not` +
-          ` exist in options object ${JSON.stringify(option)}.\n` +
-          'https://vue-select.org/api/html#getoptionlabel'
-      )
-      return ''
-    }
-    return option[key] as string
-  }
-  return option
-}
+
 const setComboBoxAriaLabel = () => {
   const comboBoxElement = (unref(select) as ComponentPublicInstance).$el.querySelector(
     'div:first-child'
@@ -368,10 +356,32 @@ const setDropdownPosition = () => {
 const dropdownOpen = computed(() => {
   return unref(select)?.dropdownOpen
 })
+
+const getOptionLabel = computed(() => {
+  return (
+    getOptionLabelProp ||
+    ((option: string | Record<string, unknown>): string => {
+      if (typeof option === 'object') {
+        const key = optionLabel || label
+        if (!Object.hasOwn(option, key)) {
+          console.warn(
+            `[vue-select warn]: Label key "option.${key}" does not` +
+              ` exist in options object ${JSON.stringify(option)}.\n` +
+              'https://vue-select.org/api/html#getoptionlabel'
+          )
+          return ''
+        }
+        return option[key] as string
+      }
+      return option
+    })
+  )
+})
+
 const additionalAttributes = computed(() => {
   const additionalAttrs: Record<string, unknown> = {}
   additionalAttrs['input-id'] = id
-  additionalAttrs['getOptionLabel'] = getOptionLabel
+  additionalAttrs['getOptionLabel'] = unref(getOptionLabel)
   additionalAttrs['label'] = optionLabel
 
   return { ...attrs, ...additionalAttrs }