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();
+
+ 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((props, ref) =
const handleChange = (event: React.ChangeEvent, 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);
}
};