@spaethtech/svelte-ui 0.21.4-dev.145.a66fc9d → 0.21.4-dev.146.fe8308c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,4 @@
1
1
  <script lang="ts">
2
- import { onMount } from "svelte";
3
2
  import type { Snippet } from "svelte";
4
3
  import type { HTMLInputAttributes } from "svelte/elements";
5
4
  import type { Size } from "../types/sizes.js";
@@ -100,19 +99,6 @@
100
99
  element = inputElement;
101
100
  });
102
101
 
103
- // Recover text typed (or autofilled) BEFORE hydration. With a one-way `value` binding Svelte
104
- // overwrites the DOM input with the initial prop value on hydration, so anything entered on the
105
- // SSR'd page before the client took over is lost and never flows back into `value` (no input event
106
- // fires for it). Once mounted, if the live DOM value differs from the prop, adopt it — matching what
107
- // a native `<input bind:value>` does, without touching steady-state semantics: a wrapper that drives
108
- // `value` from derived/formatted state (e.g. NumberInput's `stringValue`) sees a matching value and
109
- // no write happens. Fixes dropped input on slow devices, autofill, and password managers.
110
- onMount(() => {
111
- if (inputElement && inputElement.value !== String(value ?? "")) {
112
- value = inputElement.value;
113
- }
114
- });
115
-
116
102
  // Validation logic
117
103
  let validationResult = $state<boolean | string>(true);
118
104
 
@@ -269,10 +255,11 @@
269
255
  return `${base} ${interactive}`.trim();
270
256
  });
271
257
 
272
- // Event handlers
258
+ // Event handlers. `value` is kept in sync by `bind:value` on the inner input (which also, crucially,
259
+ // reads the DOM value back during hydration — so text typed or autofilled before the client took over
260
+ // survives, unlike a one-way `{value}` that the hydration attribute effect overwrites). We only
261
+ // forward the consumer's callback here.
273
262
  function handleInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
274
- const target = event.target as HTMLInputElement;
275
- value = target.value;
276
263
  oninputProp?.(event);
277
264
  }
278
265
 
@@ -362,7 +349,7 @@
362
349
  <input
363
350
  bind:this={inputElement}
364
351
  {type}
365
- {value}
352
+ bind:value
366
353
  {disabled}
367
354
  {readonly}
368
355
  oninput={handleInput}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaethtech/svelte-ui",
3
- "version": "0.21.4-dev.145.a66fc9d",
3
+ "version": "0.21.4-dev.146.fe8308c",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/spaethtech/svelte-ui.git"