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 @@ + + +