@juspay/svelte-ui-components 2.136.9 → 2.136.10

package/dist/SplitInput/SplitInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import Input from '../Input/Input.svelte';
   import type { FieldConfig, SplitInputProperties } from './properties';
 
@@ -37,6 +38,31 @@
     return values.at(index) ?? '';
   }
 
+  /**
+   * Writes the resolved state back onto the DOM element.
+   *
+   * Needed because the element can hold a value the state never had. Typing
+   * into a filled field produces a two-character string in the DOM, and when
+   * the character we resolve out of it happens to equal what was already
+   * stored -- overtyping 2 with another 2 -- the assignment is a no-op, Svelte
+   * sees no change, and nothing re-renders. The field is then left displaying
+   * "22" indefinitely while the state says "2".
+   */
+  async function syncFieldElement(index: number) {
+    // After the pending render, not before it: writing during the input handler
+    // is undone when Svelte flushes, and when the resolved value is unchanged
+    // there is no flush to piggyback on -- so the correction has to come last.
+    await tick();
+    const element = inputRefs.at(index)?.getInputRef();
+    if (element === null || typeof element === 'undefined') {
+      return;
+    }
+    const resolved = getFieldValue(index);
+    if (element.value !== resolved) {
+      element.value = resolved;
+    }
+  }
+
   function commitValues() {
     const filled = values.filter((v) => v.length > 0);
     oninput?.([...values]);
@@ -104,7 +130,19 @@
       } else {
         // Overtyping an already-filled field: keep the newest character and
         // advance, mirroring single-char entry.
-        values[index] = chars.slice(-1);
+        //
+        // Which character is "newest" cannot be assumed to be the last one.
+        // The browser inserts at the caret, and where the caret sits after a
+        // click on a filled single-character field is platform-dependent:
+        // Chromium on macOS puts it after the character, Chromium on Linux
+        // before it. So typing 7 into a field holding 2 yields "27" on one and
+        // "72" on the other, and slice(-1) silently picks the *old* digit on
+        // Linux. Removing one occurrence of the previous value identifies the
+        // newly typed character wherever it landed.
+        const previous = getFieldValue(index);
+        const remainder = previous.length === 1 ? chars.replace(previous, '') : '';
+        values[index] = remainder.length > 0 ? remainder.slice(-1) : chars.slice(-1);
+        void syncFieldElement(index);
         if (index < fieldCount - 1) {
           focusField(index + 1);
         }

package/dist-wc/index.js

@@ -7050,62 +7050,72 @@ function SplitInput(e, t) {
 	function R(e) {
 		return n().at(e) ?? "";
 	}
-	function G() {
+	async function G(e) {
+		await tick();
+		let t = get(k).at(e)?.getInputRef();
+		if (t == null) return;
+		let n = R(e);
+		t.value !== n && (t.value = n);
+	}
+	function te() {
 		let e = n().filter((e) => e.length > 0);
 		p()?.([...n()]), f()?.([...n()]), e.length === get(S) && h()?.([...n()]);
 	}
-	function te(e) {
+	function ne(e) {
 		e >= 0 && e < get(S) && get(k).at(e)?.focus();
 	}
-	function ne(e, t) {
+	function re(e, t) {
 		return (e.dataType ?? "text") === "tel" ? t.replace(/\D/g, "") : t.replace(/\s/g, "");
 	}
-	function re(e) {
+	function be(e) {
 		let t = e.maxLength ?? 1e3;
 		return s() && t === 1 ? get(S) : t;
 	}
-	function be(e, t) {
+	function Me(e, t) {
 		let i = get(C).at(e);
 		if (i === void 0) return;
 		let a = i.maxLength ?? 1e3;
 		if (s() && a === 1 && t.length > 1) {
-			let a = ne(i, t);
+			let a = re(i, t);
 			if (a.length === 0) n(n()[e] = "", !0);
 			else if (e === 0 || a.length >= get(S)) {
 				for (let e = 0; e < Math.min(a.length, get(S)); e++) n(n()[e] = a.charAt(e), !0);
-				te(Math.min(a.length, get(S)) - 1);
-			} else n(n()[e] = a.slice(-1), !0), e < get(S) - 1 && te(e + 1);
-		} else n(n()[e] = t, !0), s() && a === 1 && t.length > 0 && e < get(S) - 1 && te(e + 1);
-		G();
-	}
-	function Me(e, t) {
-		e.key === "Backspace" ? R(t).length === 0 && t > 0 && (n(n()[t - 1] = "", !0), te(t - 1), G()) : e.key === "ArrowLeft" && t > 0 ? te(t - 1) : e.key === "ArrowRight" && t < get(S) - 1 ? te(t + 1) : e.key === "Tab" && (e.shiftKey && t > 0 ? (e.preventDefault(), te(t - 1)) : e.shiftKey === !1 && t < get(S) - 1 && (e.preventDefault(), te(t + 1)));
+				ne(Math.min(a.length, get(S)) - 1);
+			} else {
+				let t = R(e), i = t.length === 1 ? a.replace(t, "") : "";
+				n(n()[e] = i.length > 0 ? i.slice(-1) : a.slice(-1), !0), G(e), e < get(S) - 1 && ne(e + 1);
+			}
+		} else n(n()[e] = t, !0), s() && a === 1 && t.length > 0 && e < get(S) - 1 && ne(e + 1);
+		te();
 	}
 	function Re(e, t) {
+		e.key === "Backspace" ? R(t).length === 0 && t > 0 && (n(n()[t - 1] = "", !0), ne(t - 1), te()) : e.key === "ArrowLeft" && t > 0 ? ne(t - 1) : e.key === "ArrowRight" && t < get(S) - 1 ? ne(t + 1) : e.key === "Tab" && (e.shiftKey && t > 0 ? (e.preventDefault(), ne(t - 1)) : e.shiftKey === !1 && t < get(S) - 1 && (e.preventDefault(), ne(t + 1)));
+	}
+	function Ue(e, t) {
 		if (e.clipboardData === null) return;
 		e.preventDefault();
 		let i = e.clipboardData.getData("text").trim(), a = get(C).at(t);
 		if (s() && a !== void 0) {
-			let e = ne(a, i);
+			let e = re(a, i);
 			for (let i = t; i < get(S); i++) {
 				let a = i - t;
 				if (a >= e.length) break;
 				n(n()[i] = e.charAt(a), !0);
 			}
-			te(Math.min(t + e.length, get(S)) - 1);
+			ne(Math.min(t + e.length, get(S)) - 1);
 		} else n(n()[t] = i, !0);
-		G();
+		te();
 	}
-	function Ue() {
+	function it() {
 		for (let e = 0; e < get(S); e++) n(n()[e] = "", !0);
-		p()?.([...n()]), f()?.([...n()]), te(0);
+		p()?.([...n()]), f()?.([...n()]), ne(0);
 	}
-	function it() {
-		te(0);
+	function at() {
+		ne(0);
 	}
-	var at = {
-		clear: Ue,
-		focus: it,
+	var ot = {
+		clear: it,
+		focus: at,
 		get values() {
 			return n();
 		},
@@ -7172,8 +7182,8 @@ function SplitInput(e, t) {
 		set oncomplete(e) {
 			h(e), flushSync();
 		}
-	}, ot = root_3$41();
-	return each(ot, 21, () => get(C), index, (e, t, n) => {
+	}, ct = root_3$41();
+	return each(ct, 21, () => get(C), index, (e, t, n) => {
 		var i = root_2$46(), a = first_child(i), s = (e) => {
 			var t = root$72(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, c())), append(e, t);
@@ -7183,7 +7193,7 @@ function SplitInput(e, t) {
 		});
 		var l = sibling(a, 2), u = child(l);
 		{
-			let e = /* @__PURE__ */ user_derived(() => R(n)), i = /* @__PURE__ */ user_derived(() => get(t).dataType ?? "text"), a = /* @__PURE__ */ user_derived(() => re(get(t))), s = /* @__PURE__ */ user_derived(() => get(t).validationPattern ?? null), c = /* @__PURE__ */ user_derived(() => get(t).validators ?? []), l = /* @__PURE__ */ user_derived(() => get(t).autoComplete ?? "on");
+			let e = /* @__PURE__ */ user_derived(() => R(n)), i = /* @__PURE__ */ user_derived(() => get(t).dataType ?? "text"), a = /* @__PURE__ */ user_derived(() => be(get(t))), s = /* @__PURE__ */ user_derived(() => get(t).validationPattern ?? null), c = /* @__PURE__ */ user_derived(() => get(t).validators ?? []), l = /* @__PURE__ */ user_derived(() => get(t).autoComplete ?? "on");
 			bind_this(Input(u, {
 				get value() {
 					return get(e);
@@ -7223,9 +7233,9 @@ function SplitInput(e, t) {
 				},
 				actionInput: !0,
 				classes: "field-group-input",
-				onInput: (e) => be(n, e),
-				onKeyDown: (e) => Me(e, n),
-				onPaste: (e) => Re(e, n)
+				onInput: (e) => Me(n, e),
+				onKeyDown: (e) => Re(e, n),
+				onPaste: (e) => Ue(e, n)
 			}), (e, t) => get(k)[t] = e, (e) => get(k)?.[e], () => [n]);
 		}
 		var f = sibling(u, 2), p = (e) => {
@@ -7235,9 +7245,9 @@ function SplitInput(e, t) {
 		if_block(f, (e) => {
 			typeof get(t).label == "string" && e(p);
 		}), reset(l), append(e, i);
-	}), reset(ot), template_effect(() => {
-		set_class(ot, 1, `field-group ${u() ?? "" ?? ""}`, "svelte-1gcz5cs"), set_attribute(ot, "data-pw", l()), set_attribute(ot, "testid", l());
-	}), append(e, ot), pop(at);
+	}), reset(ct), template_effect(() => {
+		set_class(ct, 1, `field-group ${u() ?? "" ?? ""}`, "svelte-1gcz5cs"), set_attribute(ct, "data-pw", l()), set_attribute(ct, "testid", l());
+	}), append(e, ct), pop(ot);
 }
 create_custom_element(SplitInput, {
 	values: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.136.9",
+  "version": "2.136.10",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",