Kaynağa Gözat

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 yıl önce
ebeveyn
işleme
593334562e
1 değiştirilmiş dosya ile 4 ekleme ve 3 silme
  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)