From b8bc11ca529e84b40ed40c0bc3dbfa2f0956a7d3 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 31 Aug 2023 18:17:03 -0700 Subject: [PATCH] fix(input, input-number): correctly sanitize numbers when pasting string with 'e' (#7648) **Related Issue:** # ## Summary Prevent error when pasting a string like `123test` into `calcite-input-number` and `calcite-input type="number`. The error was due to our sanitization logic, which splits on `e` for exponential notation and sanitizes each part. In the `123test` example, the rest of the letters after the `e` are sanitized causing a `reduce()` on nothing. On the other hand, `123fine` works fine because the `e` is at the end of the string so the falsy check kicks in before the `reduce()`. The fix uses `join()`, which doesn't throw errors on empty strings. ## Reproduction Sample: https://developers.arcgis.com/calcite-design-system/components/input-number/#sample Steps: 1. Open the sample and paste `123test` into the input 2. Notice `test` isn't sanitized 3. Open the console and you'll see the following error ``` Uncaught TypeError: reduce of empty array with no initial value o https://js.arcgis.com/calcite-components/1.6.1/p-06a878f3.js:6 f https://js.arcgis.com/calcite-components/1.6.1/p-06a878f3.js:6 f https://js.arcgis.com/calcite-components/1.6.1/p-06a878f3.js:6 o https://js.arcgis.com/calcite-components/1.6.1/p-06a878f3.js:6 inputNumberInputHandler https://js.arcgis.com/calcite-components/1.6.1/p-1c7861e8.entry.js:6 ``` --- packages/calcite-components/src/utils/number.spec.ts | 7 +++++++ packages/calcite-components/src/utils/number.ts | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/utils/number.spec.ts b/packages/calcite-components/src/utils/number.spec.ts index 16400d1c5aa..62312627f8b 100644 --- a/packages/calcite-components/src/utils/number.spec.ts +++ b/packages/calcite-components/src/utils/number.spec.ts @@ -34,21 +34,28 @@ describe("parseNumberString", () => { expect(parseNumberString("")).toBe(""); expect(parseNumberString("only numbers")).toBe(""); + // eslint-disable-next-line @cspell/spellchecker const lettersAndSymbols = "kjas;lkjwo;aij(*&,asd;flkj-"; + // eslint-disable-next-line @cspell/spellchecker const lettersAndSymbolsWithLeadingNegativeSign = "-ASDF(*^LKJihsdf*&^"; expect(parseNumberString(lettersAndSymbols)).toBe(""); expect(parseNumberString(lettersAndSymbolsWithLeadingNegativeSign)).toBe(""); + expect(parseNumberString("123test")).toBe("123e"); }); it("returns valid number string for string values that compute to a valid number", () => { const stringWithLettersAndDigits = "lkj2323lkj"; const frenchNumber = "1 2345,67"; const positiveInteger = "123345345"; + // eslint-disable-next-line @cspell/spellchecker const stringWithLettersDigitsAndSymbols = "123sdfa34345klndfsi8*&(^asdf5345"; const decimal = "123123.234234"; + // eslint-disable-next-line @cspell/spellchecker const stringWithLettersAndDecimal = "12asdfas$%@$3123.23asdf2a4234"; + // eslint-disable-next-line @cspell/spellchecker const stringWithLettersDecimalAndNonLeadingNegativeSign = "12a-sdfas$%@$3123.23asdf2a4234"; + // eslint-disable-next-line @cspell/spellchecker const stringWithLettersDecimalAndLeadingNegativeSign = "-12a-sdfas$%@$3123.23asdf2a4234"; expect(parseNumberString(stringWithLettersAndDigits)).toBe("2323"); diff --git a/packages/calcite-components/src/utils/number.ts b/packages/calcite-components/src/utils/number.ts index 388b6b0dc34..21d6e1b381c 100644 --- a/packages/calcite-components/src/utils/number.ts +++ b/packages/calcite-components/src/utils/number.ts @@ -120,7 +120,7 @@ export function parseNumberString(numberString?: string): string { } return numberKeys.includes(value); }) - .reduce((string, part) => string + part); + .join(""); return isValidNumber(result) ? new BigDecimal(result).toString() : ""; }); }