fix(input, input-number): increment/decrement unsafe numbers without loss of precision

src/components/input-number/input-number.e2e.ts

@@ -210,6 +210,55 @@ describe("calcite-input-number", () => {
       page = await newE2EPage();
     });
 
+    it("correctly increments/decrements numbers greater than MAX_SAFE_INTEGER", async () => {
+      await page.setContent(
+        html`<calcite-input-number
+          value="100000000000000000000000000000000000000000000000000."
+          step="10"
+        ></calcite-input-number>`
+      );
+      const element = await page.find("calcite-input-number");
+      const numberHorizontalItemDown = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='down']"
+      );
+      const numberHorizontalItemUp = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='up']"
+      );
+      expect(await element.getProperty("value")).toBe("100000000000000000000000000000000000000000000000000");
+      await numberHorizontalItemUp.click();
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe("100000000000000000000000000000000000000000000000010");
+      element.setProperty("step", 0.1);
+      await page.waitForChanges();
+      Array.from({ length: 10 }, async () => await numberHorizontalItemDown.click());
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe("100000000000000000000000000000000000000000000000009");
+    });
+
+    it("correctly increments/decrements exponential notation numbers without losing precision", async () => {
+      await page.setContent(html`<calcite-input-number value="1.23e-60"></calcite-input-number>`);
+      const element = await page.find("calcite-input-number");
+      const numberHorizontalItemDown = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='down']"
+      );
+      const numberHorizontalItemUp = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='up']"
+      );
+      expect(await element.getProperty("value")).toBe("1.23e-60");
+      await numberHorizontalItemUp.click();
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe(
+        "1.00000000000000000000000000000000000000000000000000000000000123"
+      );
+      element.setProperty("step", 0.1);
+      await page.waitForChanges();
+      Array.from({ length: 5 }, async () => await numberHorizontalItemDown.click());
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe(
+        "0.50000000000000000000000000000000000000000000000000000000000123"
+      );
+    });
+
     it("correctly increments and decrements decimal value when number buttons are clicked and the step precision matches the precision of the initial value", async () => {
       await page.setContent(html`<calcite-input-number value="3.123" step="0.001"></calcite-input-number>`);
 

src/components/input-number/input-number.tsx

@@ -44,8 +44,12 @@ import {
   NumberingSystem,
   numberStringFormatter
 } from "../../utils/locale";
-import { decimalPlaces } from "../../utils/math";
-import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+import {
+  BigDecimal,
+  isValidNumber,
+  parseNumberString,
+  sanitizeNumberString
+} from "../../utils/number";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import {
@@ -352,7 +356,7 @@ export class InputNumber
   /** the computed icon to render */
   private requestedIcon?: string;
 
-  private nudgeNumberValueIntervalId;
+  private nudgeNumberValueIntervalId: number;
 
   mutationObserver = createObserver("mutation", () => this.setDisabledAction());
 
@@ -526,26 +530,32 @@ export class InputNumber
     nativeEvent: KeyboardEvent | MouseEvent
   ): void {
     const { value } = this;
+    const adjustment = direction === "up" ? 1 : -1;
     const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-    const inputVal = value && value !== "" ? parseFloat(value) : 0;
+    const inputVal = new BigDecimal(value !== "" ? value : "0");
+    const nudgedValue = inputVal.add(`${inputStep * adjustment}`);
 
-    const adjustment = direction === "up" ? 1 : -1;
-    const nudgedValue = inputVal + inputStep * adjustment;
-    const finalValue =
-      typeof inputMin === "number" && !isNaN(inputMin) && nudgedValue < inputMin
-        ? inputMin
-        : typeof inputMax === "number" && !isNaN(inputMax) && nudgedValue > inputMax
-        ? inputMax
-        : nudgedValue;
+    const nudgedValueBelowInputMin =
+      typeof inputMin === "number" &&
+      !isNaN(inputMin) &&
+      nudgedValue.subtract(`${inputMin}`).isNegative;
+
+    const nudgedValueAboveInputMax =
+      typeof inputMax === "number" &&
+      !isNaN(inputMax) &&
+      !nudgedValue.subtract(`${inputMax}`).isNegative;
 
-    const inputValPlaces = decimalPlaces(inputVal);
-    const inputStepPlaces = decimalPlaces(inputStep);
+    const finalValue = nudgedValueBelowInputMin
+      ? `${inputMin}`
+      : nudgedValueAboveInputMax
+      ? `${inputMax}`
+      : nudgedValue.toString();
 
     this.setNumberValue({
       committing: true,
       nativeEvent,
       origin: "user",
-      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+      value: finalValue
     });
   }
 
@@ -751,7 +761,7 @@ export class InputNumber
     event.stopPropagation();
   };
 
-  private setChildNumberElRef = (el) => {
+  private setChildNumberElRef = (el: HTMLInputElement) => {
     this.childNumberEl = el;
   };
 

src/components/input/input.e2e.ts

@@ -234,6 +234,55 @@ describe("calcite-input", () => {
       page = await newE2EPage();
     });
 
+    it("correctly increments/decrements numbers greater than MAX_SAFE_INTEGER", async () => {
+      await page.setContent(
+        html`<calcite-input-number
+          value="100000000000000000000000000000000000000000000000000."
+          step="10"
+        ></calcite-input-number>`
+      );
+      const element = await page.find("calcite-input-number");
+      const numberHorizontalItemDown = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='down']"
+      );
+      const numberHorizontalItemUp = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='up']"
+      );
+      expect(await element.getProperty("value")).toBe("100000000000000000000000000000000000000000000000000");
+      await numberHorizontalItemUp.click();
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe("100000000000000000000000000000000000000000000000010");
+      element.setProperty("step", 0.1);
+      await page.waitForChanges();
+      Array.from({ length: 10 }, async () => await numberHorizontalItemDown.click());
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe("100000000000000000000000000000000000000000000000009");
+    });
+
+    it("correctly increments/decrements exponential notation numbers without losing precision", async () => {
+      await page.setContent(html`<calcite-input-number value="1.23e-60"></calcite-input-number>`);
+      const element = await page.find("calcite-input-number");
+      const numberHorizontalItemDown = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='down']"
+      );
+      const numberHorizontalItemUp = await page.find(
+        "calcite-input-number >>> .number-button-item[data-adjustment='up']"
+      );
+      expect(await element.getProperty("value")).toBe("1.23e-60");
+      await numberHorizontalItemUp.click();
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe(
+        "1.00000000000000000000000000000000000000000000000000000000000123"
+      );
+      element.setProperty("step", 0.1);
+      await page.waitForChanges();
+      Array.from({ length: 5 }, async () => await numberHorizontalItemDown.click());
+      await page.waitForChanges();
+      expect(await element.getProperty("value")).toBe(
+        "0.50000000000000000000000000000000000000000000000000000000000123"
+      );
+    });
+
     it("correctly increments and decrements decimal value when number buttons are clicked and the step precision matches the precision of the initial value", async () => {
       await page.setContent(html`<calcite-input type="number" value="3.123" step="0.001"></calcite-input>`);
 

src/components/input/input.tsx

@@ -44,8 +44,13 @@ import {
   NumberingSystem,
   numberStringFormatter
 } from "../../utils/locale";
-import { decimalPlaces } from "../../utils/math";
-import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+
+import {
+  BigDecimal,
+  isValidNumber,
+  parseNumberString,
+  sanitizeNumberString
+} from "../../utils/number";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import {
@@ -610,26 +615,32 @@ export class Input
     nativeEvent: KeyboardEvent | MouseEvent
   ): void {
     const { value } = this;
+    const adjustment = direction === "up" ? 1 : -1;
     const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-    const inputVal = value && value !== "" ? parseFloat(value) : 0;
+    const inputVal = new BigDecimal(value !== "" ? value : "0");
+    const nudgedValue = inputVal.add(`${inputStep * adjustment}`);
 
-    const adjustment = direction === "up" ? 1 : -1;
-    const nudgedValue = inputVal + inputStep * adjustment;
-    const finalValue =
-      typeof inputMin === "number" && !isNaN(inputMin) && nudgedValue < inputMin
-        ? inputMin
-        : typeof inputMax === "number" && !isNaN(inputMax) && nudgedValue > inputMax
-        ? inputMax
-        : nudgedValue;
+    const nudgedValueBelowInputMin =
+      typeof inputMin === "number" &&
+      !isNaN(inputMin) &&
+      nudgedValue.subtract(`${inputMin}`).isNegative;
+
+    const nudgedValueAboveInputMax =
+      typeof inputMax === "number" &&
+      !isNaN(inputMax) &&
+      !nudgedValue.subtract(`${inputMax}`).isNegative;
 
-    const inputValPlaces = decimalPlaces(inputVal);
-    const inputStepPlaces = decimalPlaces(inputStep);
+    const finalValue = nudgedValueBelowInputMin
+      ? `${inputMin}`
+      : nudgedValueAboveInputMax
+      ? `${inputMax}`
+      : nudgedValue.toString();
 
     this.setValue({
       committing: true,
       nativeEvent,
       origin: "user",
-      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+      value: finalValue
     });
   }
 

src/components/slider/slider.tsx

@@ -863,7 +863,7 @@ export class Slider
       return;
     }
     event.preventDefault();
-    const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
+    const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(`${step}`)));
     this.setValue({
       [activeProp as SetValueProperty]: this.clamp(fixedDecimalAdjustment, activeProp)
     });
@@ -1200,7 +1200,7 @@ export class Slider
     const percent = (x - left) / width;
     const mirror = this.shouldMirror();
     const clampedValue = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
-    let value = Number(clampedValue.toFixed(decimalPlaces(this.step)));
+    let value = Number(clampedValue.toFixed(decimalPlaces(`${this.step}`)));
     if (this.snap && this.step) {
       value = this.getClosestStep(value);
     }
@@ -1214,10 +1214,10 @@ export class Slider
    * @internal
    */
   private getClosestStep(num: number): number {
-    num = Number(this.clamp(num).toFixed(decimalPlaces(this.step)));
+    num = Number(this.clamp(num).toFixed(decimalPlaces(`${this.step}`)));
     if (this.step) {
       const step = Math.round(num / this.step) * this.step;
-      num = Number(this.clamp(step).toFixed(decimalPlaces(this.step)));
+      num = Number(this.clamp(step).toFixed(decimalPlaces(`${this.step}`)));
     }
     return num;
   }

src/components/tooltip/tooltip.e2e.ts

@@ -12,6 +12,8 @@ describe("calcite-tooltip", () => {
   /**
    * Helps assert the canceled Esc key press when closing tooltips
    * Must be called before the tooltip is closed via keyboard.
+   *
+   * @param page
    */
   async function setUpEscapeKeyCancelListener(page: E2EPage): Promise<void> {
     await page.evaluate(() => {

src/utils/math.spec.ts

@@ -1,4 +1,4 @@
-import { clamp } from "./math";
+import { clamp, decimalPlaces } from "./math";
 
 describe("clamp", () => {
   it("clamps numbers within min/max", () => {
@@ -7,3 +7,11 @@ describe("clamp", () => {
     expect(clamp(11, 0, 10)).toBe(10);
   });
 });
+
+describe("decimalPlaces", () => {
+  it("returns largest number", () => {
+    expect(decimalPlaces("123.")).toBe(0);
+    expect(decimalPlaces("123.00000000000000000000000000000000000000000000000001")).toBe(50);
+    expect(decimalPlaces("123.123")).toBe(3);
+  });
+});

src/utils/math.ts

@@ -1,7 +1,9 @@
 export const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(value, max));
 
-export const decimalPlaces = (value: number): number => {
-  const match = ("" + value).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+
+export const decimalPlaces = (value: string): number => {
+  const match = value.match(decimalNumberRegex);
   if (!match) {
     return 0;
   }

src/utils/number.spec.ts

@@ -1,5 +1,11 @@
 import { locales, numberStringFormatter } from "./locale";
-import { BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "./number";
+import {
+  BigDecimal,
+  expandExponentialNumberString,
+  isValidNumber,
+  parseNumberString,
+  sanitizeNumberString
+} from "./number";
 
 describe("isValidNumber", () => {
   it("returns false for string values that can't compute to a number", () => {
@@ -137,3 +143,29 @@ describe("BigDecimal", () => {
     });
   });
 });
+
+describe("expandExponentialNumberString", () => {
+  it("integer based exponential numbers", () => {
+    expect(expandExponentialNumberString("123e4")).toBe("1230000");
+    expect(expandExponentialNumberString("1e50")).toBe("100000000000000000000000000000000000000000000000000");
+  });
+  it("decimal based exponential number strings", () => {
+    expect(expandExponentialNumberString(".987e0")).toBe("0.987");
+    expect(expandExponentialNumberString(".00000000000000000000000000000000000000000000000001e50")).toBe("1");
+    expect(expandExponentialNumberString("1.2345678987654321000000000000000000000000000000000000000000e16")).toBe(
+      "12345678987654321"
+    );
+  });
+  it("exponential number strings with negative magnitude", () => {
+    expect(expandExponentialNumberString("1.23e-60")).toBe(
+      "0.00000000000000000000000000000000000000000000000000000000000123"
+    );
+    expect(expandExponentialNumberString("100000000000000000000000000000000000000000000000000e-50")).toBe("1");
+  });
+  it("handles non-exponential numbers", () => {
+    expect(expandExponentialNumberString("1100000000000000000000000000000000000000000000000000")).toBe(
+      "1100000000000000000000000000000000000000000000000000"
+    );
+    expect(expandExponentialNumberString("")).toBe("");
+  });
+});