fix(input-number): allow editing of numbers that start with zeros

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

@@ -1490,6 +1490,86 @@ describe("calcite-input-number", () => {
     expect(await input.getProperty("value")).toBe(numberStringFormatter.localize(initialValue));
   });
 
+  it("allows editing numbers that start with zeros and have a group separator and minus sign", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-input-number group-separator></calcite-input-number>`);
+
+    const calciteInput = await page.find("calcite-input-number");
+    const input = await page.find("calcite-input-number >>> input");
+    await calciteInput.callMethod("setFocus");
+    await page.waitForChanges();
+    await typeNumberValue(page, "-7000");
+    await page.waitForChanges();
+    expect(await calciteInput.getProperty("value")).toBe("-7000");
+    expect(await input.getProperty("value")).toBe("-7,000");
+
+    await page.keyboard.press("ArrowLeft");
+    await page.keyboard.press("ArrowLeft");
+    await page.keyboard.press("ArrowLeft");
+    await page.keyboard.press("ArrowLeft");
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+    expect(await calciteInput.getProperty("value")).toBe("-0");
+    expect(await input.getProperty("value")).toBe("-000");
+
+    await page.keyboard.press("Home");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.type("5");
+    await page.waitForChanges();
+    expect(await calciteInput.getProperty("value")).toBe("-5000");
+    expect(await input.getProperty("value")).toBe("-5,000");
+
+    await page.keyboard.press("Home");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.press("Backspace");
+    await page.keyboard.press("Home");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.type("7");
+    await page.waitForChanges();
+    expect(await calciteInput.getProperty("value")).toBe("-7000");
+    expect(await input.getProperty("value")).toBe("-7,000");
+  });
+
+  it("allows editing numbers that start with zeros and have decimals in the ar locale and arab numbering system", async () => {
+    const initialValue = "10000.0001";
+    numberStringFormatter.numberFormatOptions = {
+      locale: "ar",
+      numberingSystem: "arab",
+      useGrouping: false,
+    };
+
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-input-number lang="ar" numbering-system="arab" value="${initialValue}"></calcite-input-number>`,
+    );
+
+    const calciteInput = await page.find("calcite-input-number");
+    const input = await page.find("calcite-input-number >>> input");
+    await calciteInput.callMethod("setFocus");
+    await page.waitForChanges();
+
+    expect(await calciteInput.getProperty("value")).toBe(initialValue);
+    expect(await input.getProperty("value")).toBe(numberStringFormatter.localize(initialValue));
+
+    await page.keyboard.press("Home");
+    await page.keyboard.press("Delete");
+    await page.waitForChanges();
+
+    expect(await calciteInput.getProperty("value")).toBe("0.0001");
+    expect(await input.getProperty("value")).toBe(
+      // the localize method converts the string to a number, which removes the leading zeros
+      // so we need to manually add them back in the test when confirming the expected value
+      `${numberStringFormatter.localize("0").repeat(3)}${numberStringFormatter.localize("0.0001")}`,
+    );
+
+    await typeNumberValue(page, "2");
+    await page.waitForChanges();
+
+    expect(await calciteInput.getProperty("value")).toBe("20000.0001");
+    expect(await input.getProperty("value")).toBe(numberStringFormatter.localize("20000.0001"));
+  });
+
   it("cannot be modified when readOnly is true", async () => {
     const page = await newE2EPage();
     await page.setContent(html`<calcite-input-number read-only value="123" clearable></calcite-input-number>`);

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

@@ -823,6 +823,9 @@ export class InputNumber
     const hasTrailingDecimalSeparator =
       valueHandleInteger.charAt(valueHandleInteger.length - 1) === ".";
 
+    const hasLeadingMinusSign = valueHandleInteger.charAt(0) === "-";
+    const hasLeadingZeros = valueHandleInteger.match(/^-?(0+)\d/);
+
     const sanitizedValue =
       hasTrailingDecimalSeparator && isValueDeleted
         ? valueHandleInteger
@@ -846,11 +849,20 @@ export class InputNumber
     }
 
     // adds localized trailing decimal separator
-    this.displayedValue =
-      hasTrailingDecimalSeparator && isValueDeleted
-        ? `${newLocalizedValue}${numberStringFormatter.decimal}`
-        : newLocalizedValue;
+    if (hasTrailingDecimalSeparator && isValueDeleted) {
+      newLocalizedValue = `${newLocalizedValue}${numberStringFormatter.decimal}`;
+    }
+
+    // adds localized leading zeros
+    if (hasLeadingZeros) {
+      newLocalizedValue = `${
+        hasLeadingMinusSign ? newLocalizedValue.charAt(0) : ""
+      }${numberStringFormatter.localize("0").repeat(hasLeadingZeros[1].length)}${
+        hasLeadingMinusSign ? newLocalizedValue.slice(1) : newLocalizedValue
+      }`;
+    }
 
+    this.displayedValue = newLocalizedValue;
     this.setPreviousNumberValue(previousValue ?? this.value);
     this.previousValueOrigin = origin;
     this.userChangedValue = origin === "user" && this.value !== newValue;

packages/calcite-components/src/demos/input-number.html

@@ -135,8 +135,14 @@
         <div class="child-flex font right-aligned-text">Number Vertical</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            Input Label
-            <calcite-input-number placeholder="Placeholder" scale="s" value="123" step="1"></calcite-input-number>
+            Input Label AR2
+            <calcite-input-number
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              lang="ar"
+              numbering-system="arab"
+            ></calcite-input-number>
           </calcite-label>
         </div>