@ecohouse/ui 0.1.62 → 0.1.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.62",
+  "version": "0.1.63",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/VerificationCodeInput/VerificationCodeInput.test.ts

@@ -32,6 +32,20 @@ describe("updateVerificationCells", () => {
     });
   });
 
+  it("lays a whole pasted code out from the start when a later cell has focus", () => {
+    expect(updateVerificationCells(toVerificationCells("", 6), 4, "123456", 6)).toEqual({
+      cells: ["1", "2", "3", "4", "5", "6"],
+      nextFocus: 5,
+    });
+  });
+
+  it("still fills forward when the pasted digits fit from the focused cell", () => {
+    expect(updateVerificationCells(toVerificationCells("12", 6), 2, "3456", 6)).toEqual({
+      cells: ["1", "2", "3", "4", "5", "6"],
+      nextFocus: 5,
+    });
+  });
+
   it("replaces a selected digit without growing the code", () => {
     expect(updateVerificationCells(toVerificationCells("123456", 6), 2, "9", 6)).toEqual({
       cells: ["1", "2", "9", "4", "5", "6"],

package/src/components/VerificationCodeInput/VerificationCodeInput.utils.ts

@@ -51,11 +51,16 @@ export function updateVerificationCells(
   length: number,
 ): VerificationCellsUpdate {
   const safeLength = Math.max(1, length);
-  const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
+  const focusedIndex = Math.min(Math.max(0, index), safeLength - 1);
   const cells = Array.from({ length: safeLength }, (_, cellIndex) => {
     const cell = currentCells[cellIndex] ?? "";
     return /^\d$/.test(cell) ? cell : "";
   });
+  // A paste that does not fit from the focused cell (typically a whole code pasted while a
+  // later cell has focus) is laid out from the first cell instead of being cut to the tail.
+  const pastedDigits = input.replace(/\D/g, "");
+  const safeIndex =
+    pastedDigits.length > 1 && pastedDigits.length > safeLength - focusedIndex ? 0 : focusedIndex;
   const insertedDigits = normalizeVerificationCode(input, safeLength - safeIndex);
 
   if (!insertedDigits) {