diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
index 51f8be358..3eb0955e2 100644
--- a/packages/radix-vue/src/Combobox/ComboboxRoot.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -137,6 +137,9 @@ async function onOpenChange(val: boolean) {
else
selectedValue.value = modelValue.value as T
}
+ // selectedElement is a computed value and is not yet fully resolved.
+ // We need to wait for it to finish processing at this point.
+ await nextTick()
inputElement.value?.focus()
scrollSelectedValueIntoView()
}
@@ -233,7 +236,7 @@ function scrollSelectedValueIntoView() {
// Find the highlighted element and scroll into view
// We can put this in Item, but we avoid having too many watcher
if (selectedElement.value instanceof Element)
- selectedElement.value.scrollIntoView({ block: 'nearest' })
+ selectedElement.value?.scrollIntoView({ block: 'nearest' })
}
function focusOnSelectedElement() {
@@ -273,6 +276,9 @@ provideComboboxRootContext({
else
selectedValue.value = filteredOptions.value[val === 'up' ? index - 1 : index + 1]
+ await nextTick()
+ // selectedElement is a computed value and is not yet fully resolved.
+ // We need to wait for it to finish processing at this point.
scrollSelectedValueIntoView()
focusOnSelectedElement()
diff --git a/packages/radix-vue/src/Combobox/story/ComboboxScrolling.story.vue b/packages/radix-vue/src/Combobox/story/ComboboxScrolling.story.vue
new file mode 100644
index 000000000..4d2e99193
--- /dev/null
+++ b/packages/radix-vue/src/Combobox/story/ComboboxScrolling.story.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fruits
+
+
+
+
+
+
+
+ {{ option }}
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ {{ option }}
+
+
+
+
+
+
+
+
+