focus search input when opening menu from header (sveltejs#232)

* include all exercises in chapter that matches search - closes sveltejs#226

* this code looks wholly unnecessary

* focus search input when opening menu from header - closes sveltejs#225

Author: Rich-Harris

src/routes/tutorial/[slug]/Menu.svelte

@@ -6,36 +6,29 @@
 	import Icon from '@sveltejs/site-kit/components/Icon.svelte';
 	import { browser } from '$app/environment';
 	import { afterNavigate } from '$app/navigation';
+	import { tick } from 'svelte';
 
 	/** @type {import('$lib/types').PartStub[]}*/
 	export let index;
 
 	/** @type {import('$lib/types').Exercise} */
 	export let current;
 
+	const duration = browser && matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 200;
+
 	let is_open = false;
 	let search = '';
 
-	let expanded_part = '';
-	let expanded_chapter = '';
-	let duration = 0;
+	/** @type {HTMLInputElement} */
+	let search_input;
 
-	// The following statements ensure that the select animation is not run during opening the menu
-	$: if (is_open || !is_open) {
-		expanded_part = current.part.slug;
-		expanded_chapter = current.chapter.slug;
-	}
-	$: if (is_open) {
-		duration = 0;
-		setTimeout(() => {
-			duration = browser && matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 200;
-		}, 210);
-	}
+	$: expanded_part = current.part.slug;
+	$: expanded_chapter = current.chapter.slug;
 
 	$: regex = new RegExp(`\\b${search.length >= 2 ? search : ''}`, 'i');
 
 	$: filtered = index
-		.map((part, i) => {
+		.map((part) => {
 			return {
 				slug: part.slug,
 				title: part.title,
@@ -92,6 +85,7 @@
 			<input
 				type="search"
 				placeholder="Search"
+				bind:this={search_input}
 				bind:value={search}
 				aria-hidden={!is_open ? 'true' : null}
 				tabindex={!is_open ? -1 : null}
@@ -170,7 +164,13 @@
 
 	<!-- we don't want this to be keyboard-navigable, because the menu button to the left does that job better -->
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<h1 on:click={() => (is_open = true)}>
+	<h1
+		on:click={async () => {
+			is_open = true;
+			await tick();
+			search_input.focus();
+		}}
+	>
 		{current.part.title} <span class="separator">/</span>
 		{current.chapter.title} <span class="separator">/</span>
 		<strong>{current.title}</strong>