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 +