fix(TextField): Remove inputHolder.input object property setter workaround for Input/textarea bind:this type differences as solution to fix Vite dev server freezing. Resolve #546 (#549)

* fix(TextField): Remove `inputHolder.input` object property setter workaround for Input/textarea `bind:this` type differences as solution to fix Vite dev server freezing.  Resolve #546

* fix(Input): Update `applyMask(el)` type to include `HTMLTextAreaElement`

Author: techniq

.changeset/many-numbers-call.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(TextField): Remove `inputHolder.input` object property setter workaround for Input/textarea `bind:this` type differences as solution to fix Vite dev server freezing

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

@@ -18,7 +18,7 @@
   export let inputmode: HTMLInputAttributes['inputmode'] | undefined = undefined;
   export let id: string | undefined = undefined;
   export let actions: Actions<HTMLInputElement | HTMLTextAreaElement> | undefined = undefined;
-  export let inputEl: HTMLInputElement | null = null;
+  export let inputEl: HTMLInputElement | HTMLTextAreaElement | null = null;
   export let autocapitalize: HTMLInputAttributes['autocapitalize'] = undefined;
   let className: string | undefined = undefined;
   export { className as class };
@@ -84,7 +84,7 @@
     dispatch('change', { value });
   }
 
-  function applyMask(el: HTMLInputElement, mask: string) {
+  function applyMask(el: HTMLInputElement | HTMLTextAreaElement, mask: string) {
     if (mask) {
       // For selection (including just cursor position), ...
       const [i, j] = [el.selectionStart, el.selectionEnd].map((i) => {

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

@@ -60,12 +60,6 @@
     : 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;
@@ -371,7 +365,7 @@
                 {max}
                 {step}
                 {actions}
-                bind:inputEl={inputHolder.input}
+                bind:inputEl
                 on:input={handleInput}
                 on:focus
                 on:blur