From dd096ad2f07631d4942fd621815edcb0b0b7b79f Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Mon, 13 Jan 2025 13:50:31 +0700
Subject: [PATCH 1/7] add bind:inputEl to textarea

---
 packages/svelte-ux/src/lib/components/TextField.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index 22578e0b..fa60ecd4 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -61,7 +61,7 @@
     ? (node) => [autoFocus(node, typeof autofocus === 'object' ? autofocus : undefined)]
     : undefined;
   export let operators: { label: string; value: string }[] | undefined = undefined;
-  export let inputEl: HTMLInputElement | null = null;
+  export let inputEl: HTMLInputElement | HTMLTextAreaElement | null = null;
   export let debounceChange: boolean | number = false;
   export let classes: {
     root?: string;
@@ -327,6 +327,7 @@
                 {disabled}
                 value={inputValue}
                 {autocapitalize}
+                bind:inputEl
                 on:input={handleInput}
                 on:focus
                 on:blur

From 67c4a7be6b22710a3b2df39b75dac281c4c6e556 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Mon, 13 Jan 2025 13:54:56 +0700
Subject: [PATCH 2/7] correct bind syntax

---
 packages/svelte-ux/src/lib/components/TextField.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index fa60ecd4..392a9e60 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -327,7 +327,7 @@
                 {disabled}
                 value={inputValue}
                 {autocapitalize}
-                bind:inputEl
+                bind:this=inputEl
                 on:input={handleInput}
                 on:focus
                 on:blur

From 7bd943805b22ed5a386b591e763bc225baf563d7 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Mon, 13 Jan 2025 13:56:43 +0700
Subject: [PATCH 3/7] this shouldn't be this hard for me

---
 packages/svelte-ux/src/lib/components/TextField.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index 392a9e60..e9663dd6 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -327,7 +327,7 @@
                 {disabled}
                 value={inputValue}
                 {autocapitalize}
-                bind:this=inputEl
+                bind:this={inputEl}
                 on:input={handleInput}
                 on:focus
                 on:blur

From 0ae9bfde6f115faaa5a65fc517f6e455245fabb2 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Mon, 13 Jan 2025 14:03:55 +0700
Subject: [PATCH 4/7] use a read only binding to avoid type conflicts

---
 packages/svelte-ux/src/lib/components/TextField.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index e9663dd6..a2a704c5 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -367,7 +367,7 @@
                 {max}
                 {step}
                 {actions}
-                bind:inputEl
+                bind:inputEl={null, (el) => (inputEl = el ?? null)}
                 on:input={handleInput}
                 on:focus
                 on:blur

From 1375d1c348b7a427c43803a6750e7fd0a3950b75 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Tue, 14 Jan 2025 09:58:38 +0700
Subject: [PATCH 5/7] don't rely on svelte 5 feature

---
 packages/svelte-ux/src/lib/components/TextField.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index a2a704c5..aa56c7fa 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -62,6 +62,8 @@
     : undefined;
   export let operators: { label: string; value: string }[] | undefined = undefined;
   export let inputEl: HTMLInputElement | HTMLTextAreaElement | null = null;
+  // this is a workaround because Input only accepts an HTMLInputElement, not a TextAreaElement
+  const inputHolder = { set input(value: HTMLInputElement | null) { inputEl = value; } };
   export let debounceChange: boolean | number = false;
   export let classes: {
     root?: string;
@@ -367,7 +369,7 @@
                 {max}
                 {step}
                 {actions}
-                bind:inputEl={null, (el) => (inputEl = el ?? null)}
+                bind:inputEl={inputHolder.input}
                 on:input={handleInput}
                 on:focus
                 on:blur

From 13b978169ac9b451b45f58c98e96077d1ca7e5ac Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 15 Jan 2025 11:24:41 +0700
Subject: [PATCH 6/7] fix lint errors

---
 packages/svelte-ux/src/lib/components/TextField.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index aa56c7fa..f841b3b0 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -63,7 +63,11 @@
   export let operators: { label: string; value: string }[] | undefined = undefined;
   export let inputEl: HTMLInputElement | HTMLTextAreaElement | null = null;
   // this is a workaround because Input only accepts an HTMLInputElement, not a TextAreaElement
-  const inputHolder = { set input(value: HTMLInputElement | null) { inputEl = value; } };
+  const inputHolder = {
+    set input(value: HTMLInputElement | null) {
+      inputEl = value;
+    },
+  };
   export let debounceChange: boolean | number = false;
   export let classes: {
     root?: string;

From c6076cc7a65b3e77b8a2f357882cc41e6a9b775a Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Wed, 15 Jan 2025 12:00:46 +0700
Subject: [PATCH 7/7] add example of bind:inputEl on TextField

---
 .../routes/docs/components/TextField/+page.svelte | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte
index b4233170..7de62d0b 100644
--- a/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte
@@ -20,6 +20,7 @@
 
   import Preview from '$lib/components/Preview.svelte';
   import Blockquote from '$docs/Blockquote.svelte';
+  import Toggle from '$lib/components/Toggle.svelte';
 
   const numberOperators = [
     { label: '=', value: 'equal' },
@@ -40,6 +41,8 @@
   let value = '';
   let numberValue = 1;
   let multilineValue = 'one\ntwo\nthree';
+
+  let inputEl: HTMLInputElement | HTMLTextAreaElement | null = null;
 </script>
 
 <h1>Examples</h1>
@@ -225,6 +228,18 @@
   />
 </Preview>
 
+<h2>bind:inputEl</h2>
+
+<Preview>
+  <div class="grid gap-2 justify-start">
+    <Button on:click={() => inputEl?.focus()}>Manually Focus</Button>
+    <Toggle let:on={multiline} let:toggle>
+      <Button on:click={toggle}>{multiline ? 'To single line' : 'To multiline'}</Button>
+      <TextField label="Name" {multiline} bind:inputEl />
+    </Toggle>
+  </div>
+</Preview>
+
 <SectionDivider>Type</SectionDivider>
 
 <h2>Input types</h2>