From 3d2d3dfab17015df08a53060d21058f9a2d3c99f Mon Sep 17 00:00:00 2001
From: heartbit <alidadisaeid@gmail.com>
Date: Fri, 11 Aug 2023 01:32:41 +0330
Subject: [PATCH] [@mantine/core] PinInput: fix Gboard paste action from
 keypad's clipboard

---
 .../src/PinInput/PinInput.test.tsx            | 11 ++++++++++
 src/mantine-core/src/PinInput/PinInput.tsx    | 20 +++++++++++--------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/mantine-core/src/PinInput/PinInput.test.tsx b/src/mantine-core/src/PinInput/PinInput.test.tsx
index ae5e58622a4..36ed5d1995b 100644
--- 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
index caa64845825..a6417a07fc5 100644
--- 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);
     }
   };