Skip to content

fix: focus search inputs only on non-touch devices #426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
danielroe wants to merge 1 commit into
base: main
Choose a base branch
from
+31 −15
Open

fix: focus search inputs only on non-touch devices #426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions app/components/SearchBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<script setup lang="ts">
import { debounce } from 'perfect-debounce'

const isMobile = useIsMobile()

withDefaults(
defineProps<{
inputClass?: string
Expand Down Expand Up @@ -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')
Expand All @@ -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"
Expand Down
10 changes: 0 additions & 10 deletions app/composables/useIsMobile.ts
View file
Open in desktop

This file was deleted.

10 changes: 8 additions & 2 deletions app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -78,7 +84,7 @@ defineOgImageComponent('Default')
name="q"
:placeholder="$t('search.placeholder')"
v-bind="noCorrect"
:autofocus="!isMobile"
:autofocus="autofocus"
Copy link
Contributor

@garthdw garthdw Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need the autofocus if we are manually focusing on mount?

Copy link
Collaborator Author

@danielroe danielroe Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for client side navigation - without it it doesn't focus when navigating from index to search page

but I'm very up for other ideas!

Copy link
Contributor

@garthdw garthdw Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A dodgy mechanism I looked at implementing was watching the route. Then if the new route.name was search but old one was not, it would focus the searchbox. Might be able to do the same thing here just include the touch part? Although if you are starting search on home screen on mobile you likely want to be auto focused to search to complete it.

I don't know vue/vue router enough to know if on direct nav to search if oldRoute has a value or not.

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"
/>
Expand Down
12 changes: 12 additions & 0 deletions app/utils/responsive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/** @public */
export function isTouchDevice() {
if (import.meta.server) {
return false
}
return (
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
// @ts-ignore
Copy link
Contributor

@garthdw garthdw Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this rather be @ts-expect-error?

navigator.msMaxTouchPoints > 0
)
}
Loading