Skip to content

Fragile SearchBox selector queries #3216

Open
Open
Fragile SearchBox selector queries#3216

Description

@Mopsgamer
Mopsgamer
opened on Aug 30, 2026

Here is original function:

npmx.dev/app/pages/search.vue

Lines 483 to 488 in 16988d8

function focusSearchInput() {
const searchInput = document.querySelector<HTMLInputElement>(
'input[type="search"], input[name="q"]',
)
searchInput?.focus()
}

And this one:

npmx.dev/app/app.vue

Lines 67 to 74 in 16988d8

const searchInput = document.querySelector<HTMLInputElement>(
'input[type="search"], input[name="q"]',
)
if (searchInput) {
searchInput.focus()
return
}

They should use SearchBox's (already exposed) useTemplateRef('searchBoxRef').focus method.

Ref: #3214 (comment)

Usage examples:

npmx.dev/app/components/AppHeader.vue

Line 177 in 16988d8

const searchBoxRef = useTemplateRef('searchBoxRef')

npmx.dev/app/components/AppHeader.vue

Line 187 in 16988d8

searchBoxRef.value?.focus()

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions