fix(Combobox): default value not selected intermittently (#714)

* fix: value not selected * fix: searchTerm not triggering
unovue · Feb 25, 2024 · c3b39c1 · c3b39c1
1 parent 02d49c4
commit c3b39c1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/radix-vue/src/Combobox/ComboboxItem.vue b/packages/radix-vue/src/Combobox/ComboboxItem.vue
@@ -53,7 +53,7 @@ const { forwardRef } = useForwardExpose()
 
 const isSelected = computed(() =>
   rootContext.multiple.value && Array.isArray(rootContext.modelValue.value)
-    ? rootContext.modelValue.value?.includes(props.value as never)
+    ? rootContext.modelValue.value?.some(val => isEqual(val, props.value))
     : isEqual(rootContext.modelValue?.value, props.value),
 )
 

diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -162,7 +162,9 @@ const filteredOptions = computed(() => {
       return props.filterFunction(options.value as ArrayOrWrapped<T>, searchTerm.value) as T[]
 
     // The default filter only compares strings
-    return options.value.filter(i => typeof i === 'string' && i.toLowerCase().includes(searchTerm.value?.toLowerCase()))
+    const optionsWithTypeString = options.value.filter(i => typeof i === 'string') as string[]
+    if (optionsWithTypeString.length)
+      return optionsWithTypeString.filter(i => i.toLowerCase().includes(searchTerm.value?.toLowerCase())) as T[]
   }
   return options.value
 })
@@ -186,8 +188,11 @@ const selectedElement = computed(() => {
   return reactiveItems.value.find(i => i.value === selectedValue.value)?.ref
 })
 
+const stringifiedModelValue = computed(() => JSON.stringify(modelValue.value))
+
 // nextTick() are required in the following watchers as we are waiting for DOM element to be mounted first the only apply following logic
-watch(modelValue, async () => {
+watch(stringifiedModelValue, async () => {
+  await nextTick()
   await nextTick()
   resetSearchTerm()
 }, { immediate: true })