FIx search

packages/frontend-2/components/viewer/SearchInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="group text-body-2xs font-medium">
     <FormTextInput
-      v-bind="bind"
+      v-model="model"
       :custom-icon="Search"
       color="fully-transparent"
       :icon-classes="iconClasses"
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { FormTextInput, useDebouncedTextInput } from '@speckle/ui-components'
+import { FormTextInput } from '@speckle/ui-components'
 import { Search } from 'lucide-vue-next'
 
 defineProps<{
@@ -25,8 +25,6 @@ defineProps<{
 
 const model = defineModel<string>({ required: true })
 
-const { bind } = useDebouncedTextInput({ model })
-
 const iconClasses = computed(() => {
   const baseClasses = '!h-3 !w-3'
   const colorClasses = model.value

packages/frontend-2/components/viewer/filters/filter/string/String.vue

@@ -46,7 +46,7 @@
 
       <ViewerFiltersFilterStringCheckboxes
         :filter="filter"
-        :search-query="searchQuery"
+        :search-query="debouncedSearchQuery"
         :sort-mode="sortMode"
         class="my-1"
         @update:sort-mode="emit('update:sortMode', $event)"
@@ -63,6 +63,7 @@ import type {
 } from '~/lib/viewer/helpers/filters/types'
 import { ExistenceFilterCondition } from '~/lib/viewer/helpers/filters/types'
 import { useFilterUtilities } from '~/lib/viewer/composables/filtering/filtering'
+import { useDebounceFn } from '@vueuse/core'
 import { X } from 'lucide-vue-next'
 
 const props = defineProps<{
@@ -76,6 +77,11 @@ const { updateFilterCondition } = useFilterUtilities()
 
 const collapsed = ref(false)
 const searchQuery = ref('')
+const debouncedSearchQuery = ref('')
+
+const updateDebouncedSearch = useDebounceFn((query: string) => {
+  debouncedSearchQuery.value = query
+}, 200)
 
 const hasSearchValue = computed(() => searchQuery.value.trim().length > 0)
 
@@ -86,4 +92,12 @@ const handleConditionSelect = (conditionOption: ConditionOption) => {
 const clearSearch = () => {
   searchQuery.value = ''
 }
+
+watch(
+  searchQuery,
+  (newQuery) => {
+    updateDebouncedSearch(newQuery)
+  },
+  { immediate: true }
+)
 </script>

packages/frontend-2/components/viewer/filters/property-selection/Panel.vue

@@ -121,8 +121,7 @@ const listItems = computed((): PropertySelectionListItem[] => {
     return searchResults
   }
 
-  // Create a map for O(1) lookup instead of O(n) find operations
-  const optionsMap = new Map(props.options.map((opt) => [opt.value, opt]))
+  const optionsMap = new Map(filteredOptions.value.map((opt) => [opt.value, opt]))
   const availablePopular = FILTERS_POPULAR_PROPERTIES.map((filterKey) =>
     optionsMap.get(filterKey)
   )
@@ -138,9 +137,12 @@ const listItems = computed((): PropertySelectionListItem[] => {
     items.push(...popularItems)
   }
 
-  items.push({ type: 'header', title: `All properties (${props.options.length})` })
+  items.push({
+    type: 'header',
+    title: `All properties (${filteredOptions.value.length})`
+  })
 
-  const allPropertyItems = props.options.map((property) => ({
+  const allPropertyItems = filteredOptions.value.map((property) => ({
     type: 'property' as const,
     property
   }))

packages/frontend-2/components/viewer/filters/property-selection/Search.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="border-b border-outline-2 flex-shrink-0 relative">
     <div class="py-1">
-      <ViewerSearchInput
-        v-model="searchValue"
-        :placeholder="placeholder"
-        @input="handleInput"
-      />
+      <ViewerSearchInput v-model="modelValue" :placeholder="placeholder" />
     </div>
     <div
       v-if="hasSearchValue"
@@ -34,20 +30,11 @@ defineProps<{
   inputId?: string
 }>()
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
+const modelValue = defineModel<string>({ required: true })
 
-const searchValue = ref('')
-
-const hasSearchValue = computed(() => searchValue.value.trim().length > 0)
-
-const handleInput = () => {
-  emit('update:modelValue', searchValue.value)
-}
+const hasSearchValue = computed(() => modelValue.value.trim().length > 0)
 
 const clearSearch = () => {
-  searchValue.value = ''
-  emit('update:modelValue', '')
+  modelValue.value = ''
 }
 </script>