[@mantine/core] PinInput: Fix OTP paste not working from Google Keybo…

…ard on Android (#4641)
mantinedev · Sep 5, 2023 · d79222c · d79222c
1 parent 8022dd8
commit d79222c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/mantine-core/src/PinInput/PinInput.test.tsx b/src/mantine-core/src/PinInput/PinInput.test.tsx
@@ -75,4 +75,15 @@ describe('@mantine/core/PinInput', () => {
     await userEvent.keyboard('{Backspace}');
     expect(container.querySelectorAll('.mantine-PinInput-input')[0]).toHaveFocus();
   });
+
+  it('inputs will be filled when the value is bigger than 2 chars(ex: Gboard paste action from keypad)', async () => {
+    const spy = jest.fn();
+    const { container } = render(<PinInput {...defaultProps} onComplete={spy} length={6} />);
+
+    const element = container.querySelectorAll('.mantine-PinInput-input')[0];
+
+    const expectedValue = '123456';
+    fireEvent.change(element, { target: { value: expectedValue } });
+    expect(spy).toHaveBeenCalledWith(expectedValue);
+  });
 });
diff --git a/src/mantine-core/src/PinInput/PinInput.tsx b/src/mantine-core/src/PinInput/PinInput.tsx
@@ -190,16 +190,20 @@ export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) =
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
     const inputValue = event.target.value;
-    const nextChar =
-      inputValue.length > 1 ? inputValue.split('')[inputValue.length - 1] : inputValue;
+    const nextCharOrValue =
+      inputValue.length === 2 ? inputValue.split('')[inputValue.length - 1] : inputValue;
 
-    const isValid = validate(nextChar);
+    const isValid = validate(nextCharOrValue);
 
-    if (isValid) {
-      setFieldValue(nextChar, index);
-      focusInputField('next', index);
-    } else {
-      setFieldValue('', index);
+    if (nextCharOrValue.length < 2) {
+      if (isValid) {
+        setFieldValue(nextCharOrValue, index);
+        focusInputField('next', index);
+      } else {
+        setFieldValue('', index);
+      }
+    } else if (isValid) {
+      setValues(inputValue);
     }
   };