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); } };