add bind:inputEl to textarea in TextField (#531)

* add bind:inputEl to textarea

* correct bind syntax

* this shouldn't be this hard for me

* use a read only binding to avoid type conflicts

* don't rely on svelte 5 feature

* fix lint errors

* add example of bind:inputEl on TextField

Author: hahn-kev

packages/svelte-ux/src/lib/components/TextField.svelte

@@ -61,7 +61,13 @@
     ? (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;
+  // 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;
@@ -327,6 +333,7 @@
                 {disabled}
                 value={inputValue}
                 {autocapitalize}
+                bind:this={inputEl}
                 on:input={handleInput}
                 on:focus
                 on:blur
@@ -366,7 +373,7 @@
                 {max}
                 {step}
                 {actions}
-                bind:inputEl
+                bind:inputEl={inputHolder.input}
                 on:input={handleInput}
                 on:focus
                 on:blur

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>