From 895ed6c0aa4443c39e4a4a111a1bbd6f6494609d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 08:00:21 -0400
Subject: [PATCH] force focus in search box

---
 packages/site-kit/src/lib/search/SearchBox.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 55c8203d57..da677e1a7b 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -5,7 +5,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import { overlay_open, search_query, search_recent, searching } from '../stores';
-	import { onMount, type Snippet } from 'svelte';
+	import { onMount, tick, type Snippet } from 'svelte';
 	import { focusable_children, trap } from '../actions/focus.js';
 	import Icon from '../components/Icon.svelte';
 	import SearchResults from './SearchResults.svelte';
@@ -87,6 +87,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		close();
 	}
 
+	/** The autofocus attribute is insufficient, we need to do this */
+	function autofocus(node: HTMLInputElement) {
+		tick().then(() => node.focus());
+	}
+
 	$effect(() => {
 		if (ready) {
 			const id = uid++;
@@ -161,9 +166,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	>
 		<div class="search-box">
 			<div style="background: var(--background); padding: 0.5rem">
-				<!-- svelte-ignore a11y_autofocus -->
 				<input
-					autofocus
+					use:autofocus
 					onkeydown={(e) => {
 					if (e.key === 'Enter' && !e.isComposing) {
 						const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;