fix: mobile + desktop search focus fixes

Author: danielroe

app/components/AppHeader.vue

@@ -30,6 +30,13 @@ function expandMobileSearch() {
   })
 }
 
+watch(isOnSearchPage, () => {
+  searchBoxRef.value?.focus()
+  nextTick(() => {
+    searchBoxRef.value?.focus()
+  })
+})
+
 function handleSearchBlur() {
   showFullSearch.value = false
   // Collapse expanded search on mobile after blur (with delay for click handling)

app/pages/index.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
 
-const router = useRouter()
 const searchQuery = shallowRef('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
 const isMobile = useIsMobile()
 
-const debouncedNavigate = debounce(() => {
-  router.push({
+async function search() {
+  const query = searchQuery.value.trim()
+  await navigateTo({
     path: '/search',
-    query: searchQuery.value.trim() ? { q: searchQuery.value.trim() } : undefined,
+    query: query ? { q: query } : undefined,
   })
-}, 250)
-
-function handleSearch() {
-  // If input is empty, navigate immediately (no need to debounce)
-  return searchQuery.value.trim() ? debouncedNavigate() : router.push('/search')
 }
 
+const handleInput = isTouchDevice()
+  ? search
+  : debounce(search, 250, { leading: true, trailing: true })
+
 useSeoMeta({
   title: () => $t('seo.home.title'),
   description: () => $t('seo.home.description'),
@@ -64,7 +63,7 @@ defineOgImageComponent('Default', {
         class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
         style="animation-delay: 0.2s"
       >
-        <form method="GET" action="/search" class="relative" @submit.prevent="handleSearch">
+        <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
           <label for="home-search" class="sr-only">
             {{ $t('search.label') }}
           </label>
@@ -93,7 +92,7 @@ defineOgImageComponent('Default', {
                 v-bind="noCorrect"
                 :autofocus="!isMobile"
                 class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                @input="handleSearch"
+                @input="handleInput"
               />
 
               <button

app/utils/responsive.ts

@@ -0,0 +1,7 @@
+/** @public */
+export function isTouchDevice() {
+  if (import.meta.server) {
+    return false
+  }
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+}