Fragile SearchBox selector queries

[Mopsgamer]

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()