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 năm trước cách đây
mục cha
commit
593334562e
1 tập tin đã thay đổi với 4 bổ sung3 xóa
  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)