Pasting into PinInput doesn't handle case where value in clipboard has whitespace or line break

[armanatz]

What package has an issue?

@mantine/core

Describe the bug

Using the PinInput component, if a user tries to paste a value from the clipboard that has any whitespace or line breaks, the value does not get pasted into the input.

Since PinInput can be used for things like one time codes, if a user receives a code via email and accidentally copies a whitespace or line break, they won't be able to paste the code.

You can try the following codes on the Mantine docs for PinInput to reproduce the issue. Make sure you copy them exactly as shown below in order to simulate the whitespace or line breaks problem.

1234
1234

1234

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.1.3

If possible, please include a link to a codesandbox with a minimal reproduction

No response

Do you know how to fix the issue

Yes

Do you want to send a pull request with a fix?

Yes

Possible fix

The bug occurs due to the regex check in the handlePaste function of PinInput returning false and thus not allowing the setValue(copyValue) to execute.

I suggest trimming the clipboard value instead of taking it as is so that the regex passes the test correctly.

The offending lines can be found here: https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/components/PinInput/PinInput.tsx#L291-L296

We could add a .trim() to the end of line 291 in the file above which will fix the issue.

[rtivital]

Fixed in 7.3.1