From 74fc489c21cabca61062a33394145a563279a2a0 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Fri, 10 Jan 2025 16:11:26 -0500
Subject: [PATCH 1/2] Autofocus lexeme form when new entry dialog opens

---
 .../lib/entry-editor/field-editors/MultiFieldEditor.svelte    | 4 +++-
 .../viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte   | 2 ++
 .../src/lib/entry-editor/object-editors/EntryEditor.svelte    | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/MultiFieldEditor.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/MultiFieldEditor.svelte
index 6d729adb6..55e509b22 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/MultiFieldEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/MultiFieldEditor.svelte
@@ -19,6 +19,7 @@
   export let wsType: WritingSystemSelection;
   export let value: IMultiString;
   export let readonly: boolean = false;
+  export let autofocus: boolean = false;
 
   let unsavedChanges: Record<string, boolean> = {};
   let currentView = useCurrentView();
@@ -31,11 +32,12 @@
 <div class="multi-field field" class:collapse-field={collapse} class:empty class:hidden={!$currentView.fields[id].show} style:grid-area={id}>
   <FieldTitle {id} {name} />
   <div class="fields">
-    {#each writingSystems as ws (ws.wsId)}
+    {#each writingSystems as ws, idx (ws.wsId)}
       <CrdtTextField
         on:change={() => dispatch('change', { value })}
         bind:value={value[ws.wsId]}
         bind:unsavedChanges={unsavedChanges[ws.wsId]}
+        autofocus={autofocus && (idx == 0)}
         label={collapse ? undefined : ws.abbreviation}
         labelPlacement={collapse ? undefined : 'left'}
         placeholder={collapse ? ws.abbreviation : undefined}
diff --git a/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte b/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte
index 0bd5798c1..04a524612 100644
--- a/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte
+++ b/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte
@@ -9,6 +9,7 @@
   export let labelPlacement: ComponentProps<TextField>['labelPlacement'] = undefined;
   export let placeholder: string | undefined = undefined;
   export let readonly: boolean | undefined = undefined;
+  export let autofocus: boolean = false;
   let append: HTMLElement;
 
   // Labels don't always fit (beause WS's can be long and ugly), so a title might be important sometimes
@@ -25,6 +26,7 @@
     actions={(el) => { addTitleToLabel(el); return []; }}
     value={editorValue}
     disabled={readonly}
+    autofocus={autofocus}
     class="ws-field gap-2 text-right"
     classes={{ root: `${editorValue ? '' : 'empty'} ${readonly ? 'readonly' : ''}`, input: 'field-input', container: 'field-container' }}
     {label}
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte
index 531ba11b9..84fee67b4 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte
@@ -116,6 +116,7 @@
     <MultiFieldEditor on:change={() => dispatch('change', {entry})}
                       bind:value={entry.lexemeForm}
                       {readonly}
+                      autofocus={modalMode}
                       id="lexemeForm"
                       wsType="vernacular"/>
 

From ec86c190538c0140cbd0330dcd5cff69d8e1dc81 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Tue, 14 Jan 2025 10:12:39 +0700
Subject: [PATCH 2/2] workaround autofocus bug in svelte-ux

---
 .../src/lib/entry-editor/inputs/CrdtTextField.svelte  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte b/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte
index 04a524612..657c1dca2 100644
--- a/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte
+++ b/frontend/viewer/src/lib/entry-editor/inputs/CrdtTextField.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import CrdtField from './CrdtField.svelte';
-  import { TextField } from 'svelte-ux';
+  import { TextField, autoFocus as autoFocusFunc } from 'svelte-ux';
 
   export let value: string | number | null | undefined;
   export let unsavedChanges = false;
@@ -18,15 +18,18 @@
     if (label && labelElem) labelElem.setAttribute('title', label);
   }
 </script>
-
 <CrdtField on:change bind:value bind:unsavedChanges let:editorValue let:save let:onEditorValueChange viewMergeButtonPortal={append}>
   <TextField
     on:change={(e) => onEditorValueChange(e.detail.inputValue)}
     on:blur={(e) => {if (e.target) save()}}
-    actions={(el) => { addTitleToLabel(el); return []; }}
+    actions={(el) => {
+      addTitleToLabel(el);
+      // autofocus requires a delay otherwise it won't work in a dialog
+      // also we can't use the autofocus attribute because of https://github.com/techniq/svelte-ux/issues/532
+      return autofocus ? [autoFocusFunc(el, {delay: 5})] : [];
+    }}
     value={editorValue}
     disabled={readonly}
-    autofocus={autofocus}
     class="ws-field gap-2 text-right"
     classes={{ root: `${editorValue ? '' : 'empty'} ${readonly ? 'readonly' : ''}`, input: 'field-input', container: 'field-container' }}
     {label}