Skip to content

Commit

Permalink
[@mantine/core] PinInput: Fix OTP paste not working from Google Keybo…
Browse files Browse the repository at this point in the history
…ard on Android (#4641)
  • Loading branch information
saeidalidadi authored Sep 5, 2023
1 parent 8022dd8 commit d79222c
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 8 deletions.
11 changes: 11 additions & 0 deletions src/mantine-core/src/PinInput/PinInput.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
20 changes: 12 additions & 8 deletions src/mantine-core/src/PinInput/PinInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

Expand Down

0 comments on commit d79222c

Please sign in to comment.