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

…ard on Android (mantinedev#4641)
arel · Sep 13, 2023 · d2aac24 · d2aac24
1 parent 71e8b28
commit d2aac24
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);
  }
  };