fix: focus only on non-touch devices

Author: danielroe

app/components/SearchBox.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
 
-const isMobile = useIsMobile()
-
 withDefaults(
   defineProps<{
     inputClass?: string
@@ -60,6 +58,15 @@ watch(
   },
 )
 
+const autofocus = import.meta.client && !isTouchDevice()
+const headerSearchRef = useTemplateRef('headerSearchRef')
+onMounted(() => {
+  // Autofocus the search input on page load for non-touch devicese
+  if (!isTouchDevice()) {
+    headerSearchRef.value?.focus()
+  }
+})
+
 function handleSearchBlur() {
   isSearchFocused.value = false
   emit('blur')
@@ -86,9 +93,10 @@ function handleSearchFocus() {
 
           <input
             id="header-search"
-            :autofocus="!isMobile"
+            ref="headerSearchRef"
             v-model="searchQuery"
             type="search"
+            :autofocus="autofocus"
             name="q"
             :placeholder="$t('search.placeholder')"
             v-bind="noCorrect"

app/composables/useIsMobile.ts

@@ -6,7 +6,13 @@ const searchQuery = ref('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
-const isMobile = useIsMobile()
+const autofocus = import.meta.client && !isTouchDevice()
+onMounted(() => {
+  // Autofocus the search input on page load for non-touch devices
+  if (!isTouchDevice()) {
+    searchInputRef.value?.focus()
+  }
+})
 
 const debouncedNavigate = debounce(() => {
   router.push({
@@ -78,7 +84,7 @@ defineOgImageComponent('Default')
                 name="q"
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
-                :autofocus="!isMobile"
+                :autofocus="autofocus"
                 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"
               />

app/pages/index.vue

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