fix(PN-10282): implement pasteHandler for OTP

packages/pn-commons/src/components/CodeModal/CodeInput.tsx

@@ -1,5 +1,6 @@
 import {
   ChangeEvent,
+  ClipboardEvent,
   Fragment,
   KeyboardEvent,
   memo,
@@ -116,6 +117,17 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange }: Props) =>
     }
   };
 
+  const pasteHandler = (event: ClipboardEvent<HTMLDivElement>, index: number) => {
+    const copiedCode = event.clipboardData.getData('text');
+    if (Number(copiedCode)) {
+      const values = copiedCode.split('');
+      values.map((element, i) => {
+        changeInputValue(element, i);
+        focusInput(index + 1);
+      });
+    }
+  };
+
   useEffect(() => {
     onChange(currentValues);
   }, [currentValues]);
@@ -143,6 +155,7 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange }: Props) =>
           onKeyDown={(event) => keyDownHandler(event, index)}
           onChange={(event) => changeHandler(event, index)}
           onFocus={(event) => event.target.select()}
+          onPaste={(event) => pasteHandler(event, index)}
           value={currentValues[index]}
           // eslint-disable-next-line functional/immutable-data
           inputRef={(node) => (inputsRef.current[index] = node)}

packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx

@@ -168,4 +168,24 @@ describe('CodeInput Component', () => {
       expect(codeInputs[0]).toBe(document.activeElement);
     });
   });
+
+  it('handles paste event', async () => {
+    // render component
+    const { getAllByTestId } = render(
+      <CodeInput initialValues={new Array(5).fill('')} onChange={handleChangeMock} />
+    );
+    const codeInputs = getAllByTestId(/code-input-[0-4]/);
+
+    // paste the value of the input and check that it is updated correctly
+    // set the cursor position to the beggining
+    act(() => (codeInputs[2] as HTMLInputElement).focus());
+    (codeInputs[2] as HTMLInputElement).setSelectionRange(0, 0);
+
+    // we must use userEvent because the keyboard event must trigger also the change event (fireEvent doesn't do that)
+    await userEvent.paste('12345');
+    await waitFor(() => {
+      expect(codeInputs[0]).toHaveValue('1');
+      expect(codeInputs[4]).toHaveValue('5');
+    });
+  });
 });