fix: input currency decimals rounding and trim zero (#361)

# Motivation

While testing the new `currency` mode of the `Input` property in Oisy, I noticed two issues which are corrected by this PR.

Leading zeros were added to the binded property (entering 0. lead to 0.000000000000) and JS was rounding the number imprecisely even though this mode requires a string as output.

# Changes

- use internationalization to wrap the decimals of the "currency"

e2e/input.e2e.ts

@@ -0,0 +1,13 @@
+import { expect, test } from "@playwright/test";
+
+const testUrl = "/components/input";
+
+test("should trim zero", async ({ page }) => {
+  await page.goto(testUrl);
+
+  const input = page.getByTestId("amount-decimals");
+  await input.fill("0.");
+
+  const output = page.getByTestId("amount-decimals-output");
+  await expect(output).toHaveText("0", { timeout: 500 });
+});

src/lib/components/Input.svelte

@@ -40,15 +40,16 @@
   let selectionStart: number | null = 0;
   let selectionEnd: number | null = 0;
 
+  const toStringWrapDecimals = (value: string): string =>
+    Number(value).toLocaleString("en", {
+      useGrouping: false,
+      maximumFractionDigits: wrapDecimals,
+    });
+
   // replace exponent format (1e-4) w/ plain (0.0001)
   const exponentToPlainNumberString = (value: string): string =>
     // number to toLocaleString doesn't support decimals for values >= ~1e16
-    value.includes("e")
-      ? Number(value).toLocaleString("en", {
-          useGrouping: false,
-          maximumFractionDigits: wrapDecimals,
-        })
-      : value;
+    value.includes("e") ? toStringWrapDecimals(value) : value;
   // To show undefined as "" (because of the type="text")
   const fixUndefinedValue = (value: string | number | undefined): string =>
     isNullish(value) ? "" : `${value}`;
@@ -134,7 +135,7 @@
         value =
           inputType === "icp"
             ? +currentValue
-            : (+currentValue).toFixed(wrapDecimals);
+            : toStringWrapDecimals(currentValue);
       }
     } else {
       internalValueChange = true;

src/routes/(split)/components/input/+page.md

@@ -1,6 +1,8 @@
 <script lang="ts">
     import Input from "$lib/components/Input.svelte";
     import IconQRCodeScanner from "$lib/icons/IconQRCodeScanner.svelte";
+
+    let amountWithDecimals: number | undefined = undefined;
 </script>
 
 # Input
@@ -55,7 +57,10 @@ Both slots are displayed `flex` with `space-between`.
 
     <Input placeholder="Enter ICP" inputType="icp" value="" />
 
-    <Input placeholder="Enter ETH" inputType="currency" value="" decimals={18} />
+    <div>
+        <Input testId="amount-decimals" placeholder="Enter ETH" inputType="currency" decimals={18} bind:value={amountWithDecimals} />
+        <p>Amount: <output data-tid="amount-decimals-output">{amountWithDecimals ?? ""}</output></p>
+    </div>
 
     <Input placeholder="Disabled" disabled value="This is a disabled value" inputType="text" />
 

src/tests/lib/components/Input.spec.ts

@@ -488,5 +488,29 @@ describe("Input", () => {
       fireEvent.input(input, { target: { value: "0.0000000112312321219" } });
       expect(input.value).toBe("0.000000011231232121");
     });
+
+    it("should not round custom decimals with JS imprecision", () =>
+      new Promise<void>((done) => {
+        const { container, component } = render(InputValueTest, {
+          props: {
+            ...props,
+            value: "0.12",
+            inputType: "currency",
+            decimals: 18,
+          },
+        });
+
+        const input: HTMLInputElement | null = container.querySelector("input");
+        assertNonNullish(input);
+
+        fireEvent.input(input, { target: { value: "0.122" } });
+
+        component.$on("testAmount", ({ detail }) => {
+          // Example if the input would be rounded with Number(value).toFixed(18)
+          expect(detail.amount).not.toBe("0.121999999999999997");
+          expect(detail.amount).toBe("0.122");
+          done();
+        });
+      }));
   });
 });