fix(Combobox): async options highlight (#1854)

J-Michalek · Jakub · zernonia · web-flow · commit 7739168915ad · 2025-07-02T14:55:08.000+08:00
* refactor(listbox-root): remove unused parameter from highlightFirstItem function

The function does not use the event in any case.

* fix(combobox-root): highlight first items after item amount is changes

This should fix issues with item highlight while using async loading for options.

* refactor(listbox-virtualizer): fix type-check

* refactor(combobox): use computed instead of reactive with watchers

Using a computed intead of a reactive with updates via watchers
should be more reliable and less prone to issues with stale state.

This also seems to fix the issues we were discussing in this PR.

* fix(combobox-cancel): use filterSearch instead of filterState.search

This happened in a badly resolved merge conflict.

* test(combobox): add story for async options

* fix: virtual list, cleanup

---------

Co-authored-by: Jakub &lt;jakub.michalek@freelo.io&gt;
Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/packages/core/src/Combobox/ComboboxCancel.vue b/packages/core/src/Combobox/ComboboxCancel.vue
@@ -18,7 +18,7 @@ const rootContext = injectComboboxRootContext()
 
 function handleClick() {
   // Reset the search to show all options.
-  rootContext.filterState.search = ''
+  rootContext.filterSearch.value = ''
 
   if (rootContext.inputElement.value) {
     rootContext.inputElement.value.value = ''
diff --git a/packages/core/src/Combobox/ComboboxEmpty.vue b/packages/core/src/Combobox/ComboboxEmpty.vue
@@ -14,7 +14,7 @@ const rootContext = injectComboboxRootContext()
 
 const isRender = computed(() => rootContext.ignoreFilter.value
   ? rootContext.allItems.value.size === 0
-  : !!rootContext.filterState.search && rootContext.filterState.filtered.count === 0,
+  : rootContext.filterState.value.count === 0,
 )
 </script>
 
diff --git a/packages/core/src/Combobox/ComboboxGroup.vue b/packages/core/src/Combobox/ComboboxGroup.vue
@@ -22,7 +22,7 @@ const props = defineProps<ComboboxGroupProps>()
 const id = useId(undefined, 'reka-combobox-group')
 const rootContext = injectComboboxRootContext()
 
-const isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterState.search ? true : rootContext.filterState.filtered.groups.has(id))
+const isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterSearch.value ? true : rootContext.filterState.value.groups.has(id))
 
 const context = provideComboboxGroupContext({
   id,
diff --git a/packages/core/src/Combobox/ComboboxInput.vue b/packages/core/src/Combobox/ComboboxInput.vue
@@ -45,13 +45,13 @@ function handleInput(event: InputEvent) {
     rootContext.onOpenChange(true)
     nextTick(() => {
       if (target.value) {
-        rootContext.filterState.search = target.value
-        listboxContext.highlightFirstItem(event)
+        rootContext.filterSearch.value = target.value
+        listboxContext.highlightFirstItem()
       }
     })
   }
   else {
-    rootContext.filterState.search = target.value
+    rootContext.filterSearch.value = target.value
   }
 }
 
@@ -86,14 +86,12 @@ watch(rootContext.modelValue, async () => {
     resetSearchTerm()
 }, { immediate: true, deep: true })
 
-watch(
-  () => props.modelValue,
-  () => {
-    if (props.modelValue !== undefined) {
-      rootContext.filterState.search = props.modelValue
-    }
-  },
-)
+watch(rootContext.filterState, () => {
+  // we exclude virtualized list as the state would be constantly updated
+  if (!rootContext.isVirtual.value) {
+    listboxContext.highlightFirstItem()
+  }
+})
 </script>
 
 <template>
diff --git a/packages/core/src/Combobox/ComboboxItem.vue b/packages/core/src/Combobox/ComboboxItem.vue
@@ -39,11 +39,11 @@ if (props.value === '') {
 }
 
 const isRender = computed(() => {
-  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {
+  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterSearch.value) {
     return true
   }
   else {
-    const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)
+    const filteredCurrentItem = rootContext.filterState.value.items.get(id)
     // If the filtered items is undefined means not in the all times map yet
     // Do the first render to add into the map
     if (filteredCurrentItem === undefined) {
diff --git a/packages/core/src/Combobox/ComboboxRoot.vue b/packages/core/src/Combobox/ComboboxRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { ListboxRootProps } from '@/Listbox'
 import type { AcceptableValue, GenericComponentInstance } from '@/shared/types'
 import { usePrimitiveElement } from '@/Primitive'
@@ -24,10 +24,8 @@ type ComboboxRootContext<T> = {
   onResetSearchTerm: EventHookOn
   allItems: Ref<Map<string, string>>
   allGroups: Ref<Map<string, Set<string>>>
-  filterState: {
-    search: string
-    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
-  }
+  filterSearch: Ref<string>
+  filterState: ComputedRef<{ count: number, items: Map<string, number>, groups: Set<string> }>
   ignoreFilter: Ref<boolean>
 }
 
@@ -68,7 +66,7 @@ export interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRoot
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import type { EventHookOn } from '@vueuse/core'
 import { createEventHook, useVModel } from '@vueuse/core'
-import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { computed, getCurrentInstance, nextTick, onMounted, ref, toRefs } from 'vue'
 import { ListboxRoot } from '@/Listbox'
 import { PopperRoot } from '@/Popper'
 
@@ -106,7 +104,7 @@ const open = useVModel(props, 'open', emits, {
 
 async function onOpenChange(val: boolean) {
   open.value = val
-  filterState.search = ''
+  filterSearch.value = ''
 
   if (val) {
     // make sure dom is ready then only highlight the selected
@@ -137,61 +135,51 @@ const allItems = ref<Map<string, string>>(new Map())
 const allGroups = ref<Map<string, Set<string>>>(new Map())
 
 const { contains } = useFilter({ sensitivity: 'base' })
-const filterState = reactive({
-  search: '',
-  filtered: {
-    /** The count of all visible items. */
-    count: 0,
-    /** Map from visible item id to its search score. */
-    items: new Map() as Map<string, number>,
-    /** Set of groups with at least one visible item. */
-    groups: new Set() as Set<string>,
-  },
-})
 
-function filterItems() {
-  if (!filterState.search || props.ignoreFilter || isVirtual.value) {
-    filterState.filtered.count = allItems.value.size
+const filterSearch = ref('')
+
+const filterState = computed<{
+  count: number
+  items: Map<string, number>
+  groups: Set<string>
+}>((oldValue) => {
+  if (!filterSearch.value || props.ignoreFilter || isVirtual.value) {
     // Do nothing, each item will know to show itself because search is empty
-    return
+    return {
+      count: allItems.value.size,
+      items: oldValue?.items ?? new Map(),
+      groups: oldValue?.groups ?? new Set(allGroups.value.keys()),
+    }
   }
 
-  // Reset the groups
-  filterState.filtered.groups = new Set()
   let itemCount = 0
+  const filteredItems = new Map<string, number>()
+  const filteredGroups = new Set<string>()
 
   // Check which items should be included
   for (const [id, value] of allItems.value) {
-    const score = contains(value, filterState.search)
-    filterState.filtered.items.set(id, score ? 1 : 0)
+    const score = contains(value, filterSearch.value)
+    filteredItems.set(id, score ? 1 : 0)
     if (score)
       itemCount++
   }
 
   // Check which groups have at least 1 item shown
   for (const [groupId, group] of allGroups.value) {
     for (const itemId of group) {
-      if (filterState.filtered.items.get(itemId)! > 0) {
-        filterState.filtered.groups.add(groupId)
+      if (filteredItems.get(itemId)! > 0) {
+        filteredGroups.add(groupId)
         break
       }
     }
   }
 
-  filterState.filtered.count = itemCount
-}
-
-watch([() => filterState.search, () => allItems.value.size], () => {
-  filterItems()
-}, { immediate: true })
-
-watch(() => open.value, () => {
-  // nextTick to allow multiple items to be mounted first
-  nextTick(() => {
-    if (open.value)
-      filterItems()
-  })
-}, { flush: 'post' })
+  return {
+    count: itemCount,
+    items: filteredItems,
+    groups: filteredGroups,
+  }
+})
 
 const inst = getCurrentInstance()
 onMounted(() => {
@@ -203,7 +191,7 @@ onMounted(() => {
 })
 
 defineExpose({
-  filtered: computed(() => filterState.filtered),
+  filtered: filterState,
   highlightedElement,
   highlightItem: primitiveElement.value?.highlightItem,
   highlightFirstItem: primitiveElement.value?.highlightFirstItem,
@@ -229,6 +217,7 @@ provideComboboxRootContext({
   onResetSearchTerm: resetSearchTerm.on,
   allItems,
   allGroups,
+  filterSearch,
   filterState,
   ignoreFilter,
 })
diff --git a/packages/core/src/Combobox/story/ComboboxAsyncOptions.story.vue b/packages/core/src/Combobox/story/ComboboxAsyncOptions.story.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useDebounceFn, useFetch } from '@vueuse/core'
+import { ref } from 'vue'
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '..'
+
+const value = ref('')
+const query = ref('')
+
+const { data, execute, isFetching } = useFetch('https://jsonplaceholder.typicode.com/comments', {
+  immediate: false,
+  initialData: [],
+  afterFetch: (ctx) => {
+    ctx.data = (ctx.data?.filter(i => i.name.toLowerCase().includes(query.value.toLowerCase())) ?? []).map(i => i.name)
+    return ctx
+  },
+
+}).get().json<string[]>()
+
+const executeDebounced = useDebounceFn(() => {
+  if (!query.value) {
+    return
+  }
+
+  execute()
+}, 1000, {
+  rejectOnCancel: true,
+})
+
+function onQueryUpdate(val: string) {
+  query.value = val
+
+  if (val) {
+    executeDebounced()
+  }
+  else {
+    data.value = []
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="Combobox/Async Options"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <ComboboxRoot
+        v-model="value"
+      >
+        <ComboboxAnchor class="max-w-[200px] min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
+          <ComboboxInput
+            :model-value="query"
+            class="bg-transparent outline-none text-grass11 placeholder-gray-400 "
+            placeholder="Test"
+            @update:model-value="onQueryUpdate"
+          />
+          <ComboboxTrigger>
+            <Icon
+              icon="radix-icons:chevron-down"
+              class="h-4 w-4 text-grass11"
+            />
+          </ComboboxTrigger>
+        </ComboboxAnchor>
+
+        <ComboboxContent class="mt-2 min-w-[160px] max-w-[200px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
+          <ComboboxViewport class="p-[5px] max-h-64 overflow-auto">
+            <div
+              v-if="isFetching"
+              class="text-gray-400 flex justify-center py-2"
+            >
+              <Icon
+                icon="radix-icons:symbol"
+                class="h-4 w-4 text-grass11 animate-spin"
+              />
+            </div>
+            <ComboboxEmpty
+              v-else-if="data?.length === 0"
+              class="text-grass11"
+            />
+
+            <template v-else>
+              <ComboboxItem
+                v-for="option in data"
+                :key="option"
+                class="text-[13px]  leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
+                :value="option"
+              >
+                <ComboboxItemIndicator
+                  class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                >
+                  <Icon icon="radix-icons:check" />
+                </ComboboxItemIndicator>
+                <span class="truncate">
+                  {{ option }}
+                </span>
+              </ComboboxItem>
+            </template>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/core/src/Listbox/ListboxFilter.vue b/packages/core/src/Listbox/ListboxFilter.vue
@@ -76,7 +76,7 @@ onUnmounted(() => {
     @keydown.enter="rootContext.onKeydownEnter"
     @input="(event: InputEvent) => {
       modelValue = (event.target as HTMLInputElement).value
-      rootContext.highlightFirstItem(event)
+      rootContext.highlightFirstItem()
     }"
     @compositionstart="rootContext.onCompositionStart"
     @compositionend="rootContext.onCompositionEnd"
diff --git a/packages/core/src/Listbox/ListboxRoot.vue b/packages/core/src/Listbox/ListboxRoot.vue
@@ -33,7 +33,7 @@ type ListboxRootContext<T> = {
   onKeydownTypeAhead: (event: KeyboardEvent) => void
   onCompositionStart: () => void
   onCompositionEnd: () => void
-  highlightFirstItem: (event: InputEvent) => void
+  highlightFirstItem: () => void
 }
 
 export const [injectListboxRootContext, provideListboxRootContext]
diff --git a/packages/core/src/Listbox/ListboxVirtualizer.vue b/packages/core/src/Listbox/ListboxVirtualizer.vue
@@ -122,7 +122,7 @@ rootContext.virtualFocusHook.on((event) => {
     })
   }
   else {
-    rootContext.highlightFirstItem(event as InputEvent)
+    rootContext.highlightFirstItem()
   }
 })
 

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const rootContext = injectComboboxRootContext()`
`14`	`14`
`15`	`15`	`const isRender = computed(() => rootContext.ignoreFilter.value`
`16`	`16`	`? rootContext.allItems.value.size === 0`
`17`		`- : !!rootContext.filterState.search && rootContext.filterState.filtered.count === 0,`
	`17`	`+ : rootContext.filterState.value.count === 0,`
`18`	`18`	`)`
`19`	`19`	`</script>`
`20`	`20`
Original file line number	Diff line number	Diff line change
`@@ -39,11 +39,11 @@ if (props.value === '') {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`const isRender = computed(() => {`
`42`		`- if (rootContext.isVirtual.value \|\| rootContext.ignoreFilter.value \|\| !rootContext.filterState.search) {`
	`42`	`+ if (rootContext.isVirtual.value \|\| rootContext.ignoreFilter.value \|\| !rootContext.filterSearch.value) {`
`43`	`43`	`return true`
`44`	`44`	`}`
`45`	`45`	`else {`
`46`		`- const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)`
	`46`	`+ const filteredCurrentItem = rootContext.filterState.value.items.get(id)`
`47`	`47`	`// If the filtered items is undefined means not in the all times map yet`
`48`	`48`	`// Do the first render to add into the map`
`49`	`49`	`if (filteredCurrentItem === undefined) {`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ type ListboxRootContext<T> = {`
`33`	`33`	`onKeydownTypeAhead: (event: KeyboardEvent) => void`
`34`	`34`	`onCompositionStart: () => void`
`35`	`35`	`onCompositionEnd: () => void`
`36`		`- highlightFirstItem: (event: InputEvent) => void`
	`36`	`+ highlightFirstItem: () => void`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`export const [injectListboxRootContext, provideListboxRootContext]`
Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@ rootContext.virtualFocusHook.on((event) => {`
`122`	`122`	`})`
`123`	`123`	`}`
`124`	`124`	`else {`
`125`		`- rootContext.highlightFirstItem(event as InputEvent)`
	`125`	`+ rootContext.highlightFirstItem()`
`126`	`126`	`}`
`127`	`127`	`})`
`128`	`128`