fix: add clear button in search field (mobile view) - #1881

Author: SahulKola

app/components/Header/SearchBox.vue

@@ -17,11 +17,17 @@ const showSearchBar = computed(() => {
 })
 
 const { model: searchQuery, startSearch } = useGlobalSearch('header')
+const hasSearchQuery = computed(() => searchQuery.value.trim().length > 0)
 
 function handleSubmit() {
   startSearch()
 }
 
+function clearSearch() {
+  searchQuery.value = ''
+  inputRef.value?.focus()
+}
+
 // Expose focus method for parent components
 const inputRef = useTemplateRef('inputRef')
 function focus() {
@@ -52,14 +58,23 @@ defineExpose({ focus })
             name="q"
             :placeholder="$t('search.placeholder')"
             no-correct
-            class="w-full min-w-25 ps-7"
+            class="w-full min-w-25 ps-7 pe-8"
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
             size="small"
           />
+          <button
+            v-if="hasSearchQuery"
+            type="button"
+            :aria-label="$t('common.close')"
+            class="absolute inset-ie-2 inline-flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            @click="clearSearch"
+          >
+            <span class="i-lucide:circle-x h-4 w-4" aria-hidden="true" />
+          </button>
           <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>
       </div>
     </form>
   </search>
-</template>
+</template>