fix(NumberInputE): Sanitize input before invoking parseInt

Royal-Navy · Dec 9, 2021 · 2c0e7ef · 2c0e7ef
1 parent 6e5b1fa
commit 2c0e7ef
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/packages/react-component-library/src/components/NumberInputE/NumberInputE.test.tsx b/packages/react-component-library/src/components/NumberInputE/NumberInputE.test.tsx
@@ -193,6 +193,36 @@ describe('NumberInputE', () => {
       assertOnChangeCall(123, 3)
     })
 
+    describe('and the user types a value with an invalid character', () => {
+      beforeEach(() => {
+        const input = wrapper.getByTestId('number-input-input')
+
+        userEvent.type(input, '1')
+        userEvent.type(input, 'a')
+        userEvent.type(input, '.')
+        userEvent.type(input, '2')
+      })
+
+      it('calls the `onChange` callback with `1`', () => {
+        expect(onChangeSpy.mock.calls[0][1]).toEqual(1)
+      })
+
+      it('calls the `onChange` callback again with `1`', () => {
+        expect(onChangeSpy.mock.calls[1][1]).toEqual(1)
+      })
+
+      it('calls the `onChange` callback yet again with `1`', () => {
+        expect(onChangeSpy.mock.calls[2][1]).toEqual(1)
+      })
+
+      it('calls the `onChange` callback again with `12`', () => {
+        expect(onChangeSpy.mock.calls[3][1]).toEqual(12)
+      })
+
+      assertInputValue('12')
+      assertOnChangeCall(12, 4)
+    })
+
     describe('and the user types a value', () => {
       beforeEach(async () => {
         const input = wrapper.getByTestId('number-input-input')
@@ -334,7 +364,7 @@ describe('NumberInputE', () => {
         wrapper.getByTestId('number-input-input').focus()
       })
 
-      describe('and the user types an invalid character', () => {
+      describe('and the value is changed to an alpha character', () => {
         beforeEach(() => {
           fireEvent.change(wrapper.getByTestId('number-input-input'), {
             target: {
@@ -343,10 +373,10 @@ describe('NumberInputE', () => {
           })
         })
 
-        assertInputValue('1')
+        assertInputValue('')
       })
 
-      describe('and the user types a valid number', () => {
+      describe('and the value is changed to a valid number', () => {
         beforeEach(() => {
           fireEvent.change(wrapper.getByTestId('number-input-input'), {
             target: {
@@ -358,7 +388,7 @@ describe('NumberInputE', () => {
         assertInputValue('3')
       })
 
-      describe('and the user types an number outside the max min range', () => {
+      describe('and the value is changed to a number outside the max min range', () => {
         beforeEach(() => {
           fireEvent.change(wrapper.getByTestId('number-input-input'), {
             target: {

diff --git a/packages/react-component-library/src/components/NumberInputE/NumberInputE.tsx b/packages/react-component-library/src/components/NumberInputE/NumberInputE.tsx
@@ -134,12 +134,13 @@ function formatValue(displayValue: number, prefix: string, suffix: string) {
 
 function getNewValue(event: React.FormEvent<HTMLInputElement>): number {
   const { value } = event.currentTarget
+  const sanitizedValue = value.replace(/\D/g, '')
 
-  if (value === '') {
+  if (sanitizedValue === '') {
     return null
   }
 
-  return parseInt(value, 10)
+  return parseInt(sanitizedValue, 10)
 }
 
 function isWithinRange(max: number, min: number, newValue: number) {