Prechádzať zdrojové kódy

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 rok pred
rodič
commit
593334562e
1 zmenil súbory, kde vykonal 4 pridanie a 3 odobranie
  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)