Attempt to fix displayName undefined error (#3424)

packages/ui/src/components/base/DropdownSelect.vue

@@ -58,7 +58,7 @@
               :value="option"
               :name="name"
             />
-            <label :for="`${name}-${index}`">{{ displayName(option) }}</label>
+            <label :for="`${name}-${index}`">{{ getOptionLabel(option) }}</label>
           </div>
         </div>
       </transition>
@@ -101,10 +101,14 @@ const props = defineProps({
   },
   displayName: {
     type: Function,
-    default: (option) => option,
+    default: undefined,
   },
 })
 
+function getOptionLabel(option) {
+  return props.displayName?.(option) ?? option
+}
+
 const emit = defineEmits(['input', 'change', 'update:modelValue'])
 
 const dropdownVisible = ref(false)
@@ -114,7 +118,7 @@ const dropdown = ref(null)
 const optionElements = ref(null)
 
 const selectedOption = computed(() => {
-  return props.displayName(selectedValue.value) || props.placeholder || 'Select an option'
+  return getOptionLabel(selectedValue.value) ?? props.placeholder ?? 'Select an option'
 })
 
 const radioValue = computed({

packages/ui/src/components/base/ManySelect.vue

@@ -43,7 +43,7 @@
             class="!w-full"
             :color="manyValues.includes(option) ? 'secondary' : 'default'"
           >
-            <slot name="option" :option="option">{{ displayName?.(option) }}</slot>
+            <slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
             <CheckIcon
               class="h-5 w-5 text-contrast ml-auto transition-opacity"
               :class="{ 'opacity-0': !manyValues.includes(option) }"
@@ -59,7 +59,7 @@
             class="!w-full"
             :color="manyValues.includes(option) ? 'secondary' : 'default'"
           >
-            <slot name="option" :option="option">{{ displayName?.(option) }}</slot>
+            <slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
             <CheckIcon
               class="h-5 w-5 text-contrast ml-auto transition-opacity"
               :class="{ 'opacity-0': !manyValues.includes(option) }"
@@ -97,7 +97,7 @@ const props = withDefaults(
     disabled: false,
     position: 'auto',
     direction: 'auto',
-    displayName: (option: Option) => option as string,
+    displayName: undefined,
     search: false,
     dropdownId: '',
     dropdownClass: '',
@@ -106,6 +106,10 @@ const props = withDefaults(
   },
 )
 
+function getOptionLabel(option: Option): string {
+  return props.displayName?.(option) ?? (option as string)
+}
+
 const emit = defineEmits(['update:modelValue', 'change'])
 const selectedValues = ref(props.modelValue || [])
 const searchInput = ref()
@@ -127,7 +131,7 @@ const filteredOptions = computed(() => {
   return props.options.filter(
     (x) =>
       !searchQuery.value ||
-      props.displayName(x).toLowerCase().includes(searchQuery.value.toLowerCase()),
+      getOptionLabel(x).toLowerCase().includes(searchQuery.value.toLowerCase()),
   )
 })
 

packages/ui/src/components/search/SearchDropdown.vue

@@ -51,10 +51,10 @@
               <Avatar :src="option.icon" :circle="circledIcons" />
               <div class="text">
                 <div class="title">
-                  {{ displayName(option.title) }}
+                  {{ getOptionLabel(option.title) }}
                 </div>
                 <div class="author">
-                  {{ displayName(option.subtitle) }}
+                  {{ getOptionLabel(option.subtitle) }}
                 </div>
               </div>
             </div>
@@ -98,7 +98,7 @@ const props = defineProps({
   },
   displayName: {
     type: Function,
-    default: (option) => option,
+    default: undefined,
   },
   circledIcons: {
     type: Boolean,
@@ -106,6 +106,10 @@ const props = defineProps({
   },
 })
 
+function getOptionLabel(option) {
+  return props.displayName?.(option) ?? option
+}
+
 const emit = defineEmits(['input', 'onSelected', 'update:modelValue', 'enter'])
 
 const dropdownVisible = ref(false)