From 8b2bc6d1091117416958486060bc959adf842238 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Tue, 23 Apr 2024 17:46:05 +0200
Subject: [PATCH] fix: chord page auto-focuses input on first load

fixes #111
---
 src/routes/config/chords/ChordPhraseEdit.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/routes/config/chords/ChordPhraseEdit.svelte b/src/routes/config/chords/ChordPhraseEdit.svelte
index fea336ee..7eeedb9f 100644
--- a/src/routes/config/chords/ChordPhraseEdit.svelte
+++ b/src/routes/config/chords/ChordPhraseEdit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from "svelte";
+  import { onMount, tick } from "svelte";
   import { changes, ChangeType } from "$lib/undo-redo";
   import type { ChordInfo } from "$lib/undo-redo";
   import { scale } from "svelte/transition";
@@ -11,6 +11,12 @@
 
   export let chord: ChordInfo;
 
+  onMount(() => {
+    if (chord.phrase.length === 0) {
+      box.focus();
+    }
+  });
+
   function keypress(event: KeyboardEvent) {
     if (event.key === "ArrowUp") {
       addSpecial(event);
@@ -103,7 +109,6 @@
 <div
   on:keydown={keypress}
   on:mousedown={clickCursor}
-  autofocus={chord.phrase.length === 0}
   role="textbox"
   tabindex="0"
   bind:this={box}