diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts
index 348e54ee2eb..99c3c482aa3 100644
--- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts
+++ b/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``);
+
+ 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``,
+ );
+
+ 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``);
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index 37f3743abe1..dd848a76540 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/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;
diff --git a/packages/calcite-components/src/demos/input-number.html b/packages/calcite-components/src/demos/input-number.html
index aa60a5a2794..6f3bbfa2a6f 100644
--- a/packages/calcite-components/src/demos/input-number.html
+++ b/packages/calcite-components/src/demos/input-number.html
@@ -135,8 +135,14 @@
Number Vertical
- Input Label
-
+ Input Label AR2
+