Selaa lähdekoodia

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 vuosi sitten
vanhempi
sitoutus
593334562e
1 muutettua tiedostoa jossa 4 lisäystä ja 3 poistoa
  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)