From e060264a622125bc69f05d2929cbcfa75dd3ae38 Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Sat, 19 Oct 2024 15:44:19 -0700
Subject: [PATCH] Focus editable text on edit.

---
 CHANGELOG                   | 1 +
 src/lib/EditableText.svelte | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/CHANGELOG b/CHANGELOG
index 24a9f16..2a41785 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -8,6 +8,7 @@ Dates should be in`YYYY-MM-DD` format and versions are in [semantic versioning](
 ### Fixed
 
 - Removed box shadow from inactive links.
+- Focus editable text on edit.
 
 ### Maintained
 
diff --git a/src/lib/EditableText.svelte b/src/lib/EditableText.svelte
index 683ee4c..fa5ae24 100644
--- a/src/lib/EditableText.svelte
+++ b/src/lib/EditableText.svelte
@@ -2,6 +2,7 @@
 	import type { PostgrestError } from '@supabase/supabase-js';
 	import Button from './Button.svelte';
 	import Loading from './Loading.svelte';
+	import { tick } from 'svelte';
 
 	interface Props {
 		text: string;
@@ -14,6 +15,7 @@
 	let editing = $state(false);
 	let revision = $state('');
 	let saving = $state(false);
+	let view = $state<HTMLInputElement | null>(null);
 
 	async function save() {
 		if (editing) {
@@ -30,6 +32,9 @@
 		} else {
 			editing = true;
 			revision = text;
+
+			await tick();
+			if (view) view.focus();
 		}
 	}
 </script>
@@ -40,6 +45,7 @@
 			<!-- svelte-ignore a11y_autofocus -->
 			<input
 				type="text"
+				bind:this={view}
 				bind:value={revision}
 				disabled={saving}
 				style:width={revision.length + 2 + 'ch'}