fix(components/atom/pinInput): fix character input on mobile virtual keyboards

components/atom/pinInput/src/hooks/useKeyPress.js

@@ -1,16 +1,31 @@
 import {useEffect} from 'react'
 
+const UNIDENTIFIED_KEYS = ['Unidentified', 'Process']
+
 const useKeyPress = (callback, {target, onChange}) => {
-  const events = []
   return useEffect(() => {
     const element = target?.current
-    if (element) {
-      events.push(element.addEventListener('keydown', callback))
+    if (!element) return
+
+    const handleKeyDown = event => {
+      if (UNIDENTIFIED_KEYS.includes(event.key)) return
+      if (event.key.length === 1) {
+        event.preventDefault()
+      }
+      callback(event)
     }
+
+    const handleInput = event => {
+      if (!event.data) return
+      // eslint-disable-next-line n/no-callback-literal
+      callback({key: event.data, preventDefault: () => {}})
+    }
+
+    element.addEventListener('keydown', handleKeyDown)
+    element.addEventListener('input', handleInput)
     return () => {
-      events.forEach(event => {
-        if (element) element.removeEventListener('keydown', callback)
-      })
+      element.removeEventListener('keydown', handleKeyDown)
+      element.removeEventListener('input', handleInput)
     }
   }, [target, callback, onChange]) // eslint-disable-line react-hooks/exhaustive-deps
 }

components/atom/pinInput/test/index.test.js

@@ -1570,6 +1570,74 @@ describe(json.name, () => {
         expect(focusPosition).to.equal(initialFocusPosition + 1)
         expect(newInnerValue.filter(Boolean).join('')).to.equal(args.value)
       })
+
+      it("given an 'Unidentified' key event (mobile virtual keyboard) should NOT change anything", () => {
+        // Given
+        const args = {value: '123456'}
+        const eventArgs = {key: 'Unidentified'}
+
+        // When
+        const hook = setupReducerEnvironment(args)
+        let [store, dispatch] = hook.result.current
+
+        const {focusPosition: initialFocusPosition, innerValue} = store
+
+        // Then
+        expect(initialFocusPosition).to.equal(0)
+        expect(innerValue.filter(Boolean).join('')).to.equal(args.value)
+
+        // And
+        // Given
+        const onChange = () => null
+        const keyboardEvent = new KeyboardEvent('keydown', {...eventArgs})
+
+        // When
+        dispatch(atomPinInputActions.setKey({event: keyboardEvent, onChange}))
+        hook.rerender()
+
+        // Then
+        store = hook.result.current[0]
+        const focusPosition = store.focusPosition
+        const newInnerValue = store.innerValue
+        expect(focusPosition).to.equal(initialFocusPosition)
+        expect(newInnerValue.filter(Boolean).join('')).to.equal(args.value)
+      })
+
+      it('given a synthetic input event (mobile fallback) with a valid char changes innerValue and increments focusPosition', () => {
+        // Given
+        const args = {value: '123456'}
+
+        // When
+        const hook = setupReducerEnvironment(args)
+        let [store, dispatch] = hook.result.current
+
+        const {focusPosition: initialFocusPosition, innerValue} = store
+
+        // Then
+        expect(initialFocusPosition).to.equal(0)
+        expect(innerValue.filter(Boolean).join('')).to.equal(args.value)
+
+        // And
+        // Given
+        const onChange = () => null
+        const syntheticEvent = {key: '9', preventDefault: () => {}}
+
+        // When
+        dispatch(atomPinInputActions.setKey({event: syntheticEvent, onChange}))
+        hook.rerender()
+
+        // Then
+        store = hook.result.current[0]
+        const focusPosition = store.focusPosition
+        const newInnerValue = store.innerValue
+        expect(focusPosition).to.equal(initialFocusPosition + 1)
+        expect(newInnerValue.filter(Boolean).join('')).to.equal(
+          args.value
+            .split('')
+            .map((value, index) => (index === initialFocusPosition ? '9' : value))
+            .join('')
+        )
+      })
     })
 
     describe('atomPinInputActions', () => {