Merge pull request #3295 from defencedigital/feat/add-keyboard-contro…

…l-numberinput feat(NumberInput): Add ability to increment decrement with keyboard
Royal-Navy · Jun 7, 2022 · 08bb001 · 08bb001
2 parents 8d16c3e + 7778dda
commit 08bb001
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 9 deletions.
diff --git a/packages/react-component-library/src/components/NumberInput/Input.tsx b/packages/react-component-library/src/components/NumberInput/Input.tsx
@@ -5,6 +5,7 @@ import { ComponentSizeType } from '../Forms'
 import { StyledInput } from '../TextInput/partials/StyledInput'
 import { StyledInputWrapper } from './partials/StyledInputWrapper'
 import { StyledLabel } from '../TextInput/partials/StyledLabel'
+import { useInputKeys } from './useInputKeys'
 
 export interface InputProps {
   hasFocus: boolean
@@ -14,11 +15,16 @@ export interface InputProps {
   name: string
   onBeforeInput: (event: React.FormEvent<HTMLInputElement>) => void
   onBlur: (event: React.FormEvent<HTMLInputElement>) => void
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onChange: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) => void
   onFocus: (event: React.FormEvent<HTMLInputElement>) => void
   onPaste: (event: React.ClipboardEvent<HTMLInputElement>) => void
   placeholder?: string
   size: ComponentSizeType
+  step: number
   value?: string | null
 }
 
@@ -28,10 +34,13 @@ export const Input: React.FC<InputProps> = ({
   id,
   label,
   size,
+  step,
   value,
+  onChange,
   ...rest
 }) => {
   const hasLabel = !!(label && label.length)
+  const { handleKeyDown } = useInputKeys(step, onChange)
 
   return (
     <StyledInputWrapper>
@@ -53,6 +62,8 @@ export const Input: React.FC<InputProps> = ({
         disabled={isDisabled}
         id={id}
         value={value || ''}
+        onKeyDown={handleKeyDown}
+        onChange={onChange}
         {...rest}
       />
     </StyledInputWrapper>

diff --git a/packages/react-component-library/src/components/NumberInput/NumberInput.test.tsx b/packages/react-component-library/src/components/NumberInput/NumberInput.test.tsx
@@ -18,7 +18,10 @@ import { NumberInput } from '.'
 const defaultProps = {
   name: 'number-input',
   onChange: (
-    _: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+    _:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLInputElement>
   ) => true,
 }
 
@@ -223,6 +226,24 @@ describe('NumberInput', () => {
 
       assertInputValue('123')
       assertOnChangeCall(123, 3)
+
+      describe('and the user presses the keyboard up arrow', () => {
+        beforeEach(async () => {
+          await userEvent.type(input, '{arrowup}')
+        })
+
+        assertInputValue('124')
+        assertOnChangeCall(124, 4)
+      })
+
+      describe('and the user presses the keyboard down arrow', () => {
+        beforeEach(async () => {
+          await userEvent.type(input, '{arrowdown}')
+        })
+
+        assertInputValue('122')
+        assertOnChangeCall(122, 4)
+      })
     })
 
     describe('and the user types a value with invalid characters', () => {

diff --git a/packages/react-component-library/src/components/NumberInput/NumberInput.tsx b/packages/react-component-library/src/components/NumberInput/NumberInput.tsx
@@ -79,7 +79,8 @@ interface NumberInputBaseProps
   onChange: (
     event:
       | React.ChangeEvent<HTMLInputElement>
-      | React.MouseEvent<HTMLButtonElement>,
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLInputElement>,
     newValue: number | null
   ) => void
   /**
@@ -243,6 +244,7 @@ export const NumberInput: React.FC<NumberInputProps> = ({
           onFocus={onLocalFocus}
           placeholder={placeholder}
           size={size}
+          step={step}
           value={committedValue}
           {...rest}
         />

diff --git a/packages/react-component-library/src/components/NumberInput/useChangeHandlers.ts b/packages/react-component-library/src/components/NumberInput/useChangeHandlers.ts
@@ -10,7 +10,8 @@ export function useChangeHandlers(
   onChange: (
     event:
       | React.ChangeEvent<HTMLInputElement>
-      | React.MouseEvent<HTMLButtonElement>,
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLInputElement>,
     newValue: number | null
   ) => void,
   setCommittedValue: React.Dispatch<React.SetStateAction<string | null>>
@@ -19,10 +20,18 @@ export function useChangeHandlers(
     event: React.MouseEvent<HTMLButtonElement>,
     newValue: string
   ) => void
-  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  handleInputChange: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) => void
 } {
   const handleInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
+    (
+      event:
+        | React.ChangeEvent<HTMLInputElement>
+        | React.KeyboardEvent<HTMLInputElement>
+    ) => {
       if (!isValueValid(event.currentTarget.value, isNegativeAllowed)) {
         return
       }

diff --git a/packages/react-component-library/src/components/NumberInput/useInputKeys.ts b/packages/react-component-library/src/components/NumberInput/useInputKeys.ts
@@ -0,0 +1,53 @@
+import React, { KeyboardEventHandler, useCallback } from 'react'
+import { Decimal } from 'decimal.js'
+import { cloneDeep, set } from 'lodash'
+
+const KEY_ARROW_UP = 'ArrowUp'
+const KEY_ARROW_DOWN = 'ArrowDown'
+
+export const useInputKeys = (
+  step: number,
+  onChange: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) => void
+): {
+  handleKeyDown: KeyboardEventHandler<HTMLInputElement>
+} => {
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      const {
+        key,
+        currentTarget: { value },
+      } = event
+
+      if (![KEY_ARROW_UP, KEY_ARROW_DOWN].includes(key)) {
+        return
+      }
+
+      event.preventDefault()
+
+      if (value && !Number.isFinite(parseFloat(value))) {
+        return
+      }
+
+      const decimal = new Decimal(value || 0)
+
+      const newEvent = cloneDeep(event)
+
+      set(
+        newEvent,
+        'currentTarget.value',
+        String(key === KEY_ARROW_UP ? decimal.plus(step) : decimal.minus(step))
+      )
+
+      onChange(newEvent)
+    },
+    [step, onChange]
+  )
+
+  return {
+    handleKeyDown,
+  }
+}
diff --git a/packages/react-component-library/src/forms/formik/formik.stories.tsx b/packages/react-component-library/src/forms/formik/formik.stories.tsx
@@ -200,7 +200,8 @@ const Example: React.FC<{ initialValues: FormValues }> = ({
                       onChange={(
                         _:
                           | React.ChangeEvent<HTMLInputElement>
-                          | React.MouseEvent<HTMLButtonElement>,
+                          | React.MouseEvent<HTMLButtonElement>
+                          | React.KeyboardEvent<HTMLInputElement>,
                         newValue: number | null
                       ) => {
                         setFieldValue('exampleNumberInput', newValue)

diff --git a/packages/react-component-library/src/forms/native/native.stories.tsx b/packages/react-component-library/src/forms/native/native.stories.tsx
@@ -162,7 +162,8 @@ const Example: React.FC<{
             onChange={(
               _:
                 | React.ChangeEvent<HTMLInputElement>
-                | React.MouseEvent<HTMLButtonElement>,
+                | React.MouseEvent<HTMLButtonElement>
+                | React.KeyboardEvent<HTMLInputElement>,
               newValue: number | null
             ) => {
               handleChange({

diff --git a/packages/react-component-library/src/forms/react-hook-form/react-hook-form.stories.tsx b/packages/react-component-library/src/forms/react-hook-form/react-hook-form.stories.tsx
@@ -69,7 +69,8 @@ const Example: React.FC<{ initialValues: FormValues }> = ({
   const handleNumberInputChange = (
     _:
       | React.ChangeEvent<HTMLInputElement>
-      | React.MouseEvent<HTMLButtonElement>,
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLInputElement>,
     newValue: number | null
   ) => setValue('exampleNumberInput', newValue)