Browse Source

fix: resolve OTP paste issue in multi-digit pin-input

Fixes an issue where pasting an OTP into an input
field caused the input to become unresponsive when
the number of pasted digits did not match the field
length. This update ensures that pasted OTPs of
varying lengths are handled correctly without freezing
the input. Users can now seamlessly paste their OTPs
using Ctrl + V, regardless of the input field length.

- Adjusted input validation to handle pasted OTPs of varying lengths.
- Enhanced field behavior to prevent unresponsiveness when pasting OTPs.

Resolves #16
satnaing 1 year ago
parent
commit
593334562e
1 changed files with 4 additions and 3 deletions
  1. 4 3
      src/components/custom/pin-input.tsx

+ 4 - 3
src/components/custom/pin-input.tsx

@@ -358,9 +358,10 @@ const usePinInput = ({
   function handleChange(e: React.ChangeEvent<HTMLInputElement>, index: number) {
     const inputValue = e.target.value
     const pastedValue = pastedVal.current
-    const inputChar = pastedValue
-      ? pastedValue.charAt(length - 1)
-      : inputValue.slice(-1)
+    const inputChar =
+      pastedValue && pastedValue.length === length
+        ? pastedValue.charAt(length - 1)
+        : inputValue.slice(-1)
 
     if (validate(inputChar)) {
       updateInputField(inputChar, index)