feat: clear search text when loading a division

Author: themightychris

src/App.vue

@@ -7,6 +7,7 @@ import SearchResults from './components/SearchResults.vue'
 
 const searchResults = ref({ matches: [], divisions: [], searchTerm: '' })
 const isResultsExpanded = ref(false)
+const searchQuery = ref('')
 
 function handleSearch(results) {
   searchResults.value = results
@@ -20,13 +21,18 @@ function handleMapSearch(results) {
   // For map searches, ensure we clear any previous search term
   searchResults.value = { ...results, searchTerm: '' }
   isResultsExpanded.value = true
+  // Clear the search box without triggering a search clear
+  searchQuery.value = ''
 }
 </script>
 
 <template>
   <div class="app">
     <CountdownBar />
-    <SearchBox @search="handleSearch" />
+    <SearchBox
+      v-model="searchQuery"
+      @search="handleSearch"
+    />
     <div class="map-wrapper">
       <MapView
         :searchResults="searchResults"

src/components/SearchBox.vue

@@ -2,8 +2,15 @@
 import { ref, watch } from 'vue'
 import { createClient } from '@supabase/supabase-js'
 
-const searchQuery = ref('')
-const emit = defineEmits(['search'])
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+const searchQuery = ref(props.modelValue)
+const emit = defineEmits(['search', 'update:modelValue'])
 
 // Initialize Supabase client
 const supabase = createClient(
@@ -25,17 +32,34 @@ function debounce(func, wait) {
   }
 }
 
-// Watch for changes in search query with debounce
-watch(searchQuery, debounce(async (newQuery) => {
-  console.log('Search query changed:', newQuery)
+// Watch for external value changes
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== searchQuery.value) {
+    searchQuery.value = newValue
+  }
+})
+
+// Watch for internal value changes
+watch(searchQuery, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+// Watch for search query changes with debounce
+const debouncedSearch = debounce(async (query) => {
+  console.log('Search query changed:', query)
 
-  if (newQuery.length >= 3) {
+  if (query.length >= 3) {
     await handleSearch()
+  } else if (query.length === 0) {
+    // Don't clear results if the query was cleared externally
+    console.log('Query cleared')
   } else {
     console.log('Query too short, clearing results')
     emit('search', { matches: [], divisions: [], searchTerm: '' })
   }
-}, 300))
+}, 300)
+
+watch(searchQuery, debouncedSearch)
 
 async function handleSearch() {
   if (searchQuery.value.length < 3) return