forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: don't autofocus search on mobile
+16
-2
+3
-1
app/components/SearchBox.vue
+3
-1
app/components/SearchBox.vue
···
1
1
<script setup lang="ts">
2
2
import { debounce } from 'perfect-debounce'
3
3
4
+
const isMobile = useIsMobile()
5
+
4
6
withDefaults(
5
7
defineProps<{
6
8
inputClass?: string
···
84
86
85
87
<input
86
88
id="header-search"
87
-
autofocus
89
+
:autofocus="!isMobile"
88
90
v-model="searchQuery"
89
91
type="search"
90
92
name="q"
+10
app/composables/useIsMobile.ts
+10
app/composables/useIsMobile.ts
···
1
+
/**
2
+
* Composable for detecting mobile devices using media query.
3
+
* Uses the same breakpoint as Tailwind's `md:` (768px).
4
+
*
5
+
* Returns `false` during SSR to avoid hydration mismatches.
6
+
* @public
7
+
*/
8
+
export function useIsMobile() {
9
+
return useMediaQuery('(max-width: 767px)')
10
+
}
+3
-1
app/pages/index.vue
+3
-1
app/pages/index.vue
···
6
6
const searchInputRef = useTemplateRef('searchInputRef')
7
7
const { focused: isSearchFocused } = useFocus(searchInputRef)
8
8
9
+
const isMobile = useIsMobile()
10
+
9
11
const debouncedNavigate = debounce(() => {
10
12
router.push({
11
13
path: '/search',
···
76
78
name="q"
77
79
:placeholder="$t('search.placeholder')"
78
80
v-bind="noCorrect"
79
-
autofocus
81
+
:autofocus="!isMobile"
80
82
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"
81
83
@input="handleSearch"
82
84
/>