From e13e606ca9ad2842a6b9c31853e1cc8b17989bd5 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 30 Jan 2026 15:45:27 +0000
Subject: [PATCH] fix: focus only on non-touch devices

---
 app/components/SearchBox.vue   | 14 +++++++++++---
 app/composables/useIsMobile.ts | 10 ----------
 app/pages/index.vue            | 10 ++++++++--
 app/utils/responsive.ts        | 12 ++++++++++++
 4 files changed, 31 insertions(+), 15 deletions(-)
 delete mode 100644 app/composables/useIsMobile.ts
 create mode 100644 app/utils/responsive.ts

diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 8909d1c2..e4c3c9cd 100644
--- a/app/components/SearchBox.vue
+++ b/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"
diff --git a/app/composables/useIsMobile.ts b/app/composables/useIsMobile.ts
deleted file mode 100644
index 9e1751ff..00000000
--- a/app/composables/useIsMobile.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Composable for detecting mobile devices using media query.
- * Uses the same breakpoint as Tailwind's `md:` (768px).
- *
- * Returns `false` during SSR to avoid hydration mismatches.
- * @public
- */
-export function useIsMobile() {
-  return useMediaQuery('(max-width: 767px)')
-}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index a1c775a9..0a6926db 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -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"
               />
diff --git a/app/utils/responsive.ts b/app/utils/responsive.ts
new file mode 100644
index 00000000..1b10b49f
--- /dev/null
+++ b/app/utils/responsive.ts
@@ -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
+  )
+}