Restore pasting from keyboard on iOS

r5n-labs · Dec 19, 2019 · 8f1802f · 8f1802f
1 parent 4d071da
commit 8f1802f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/src/OtpInput.tsx b/src/OtpInput.tsx
@@ -29,13 +29,13 @@ const OtpInput = forwardRef<TextInput, Props>(
   (
     {
       focusStyles,
+      handleKeyPress,
       handleTextChange,
       inputContainerStyles,
       inputStyles,
+      inputValue,
       placeholder,
       selectTextOnFocus,
-      inputValue,
-      handleKeyPress,
       ...rest
     },
     ref,
@@ -50,7 +50,6 @@ const OtpInput = forwardRef<TextInput, Props>(
     return (
       <View style={[inputContainerStyles, focused && focusStyles]}>
         <TextInput
-          maxLength={1}
           onBlur={() => setFocused(false)}
           onChangeText={handleTextChange}
           onFocus={() => setFocused(true)}

diff --git a/src/__tests__/__snapshots__/OtpInput.test.js.snap b/src/__tests__/__snapshots__/OtpInput.test.js.snap
@@ -11,7 +11,6 @@ exports[`<OtpInput /> render 1`] = `
 >
   <TextInput
     allowFontScaling={true}
-    maxLength={1}
     onBlur={[Function]}
     onFocus={[Function]}
     rejectResponderTermination={true}

diff --git a/src/__tests__/__snapshots__/index.test.js.snap b/src/__tests__/__snapshots__/index.test.js.snap
@@ -29,7 +29,7 @@ exports[`<OtpInputs /> render 1`] = `
       clearTextOnFocus={false}
       firstInput={true}
       keyboardType="phone-pad"
-      maxLength={1}
+      maxLength={4}
       numberOfInputs={4}
       onBlur={[Function]}
       onChangeText={[Function]}

diff --git a/src/index.tsx b/src/index.tsx
@@ -191,6 +191,12 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
         handleClearInput(index);
       }
 
+      if (text.length > 1) {
+        handleClearInput(index);
+        Keyboard.dismiss();
+        return fillInputs(text);
+      }
+
       if (text) {
         handleInputTextChange({ text, index });
       }
@@ -286,6 +292,10 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
             handleKeyPress={(keyPressEvent: NativeSyntheticEvent<TextInputKeyPressEventData>) =>
               handleKeyPress(keyPressEvent, inputIndex)
             }
+            maxLength={Platform.select({
+              android: 1,
+              ios: index === 0 ? numberOfInputs : 1,
+            })}
             autoCapitalize={autoCapitalize}
             clearTextOnFocus={clearTextOnFocus}
             firstInput={index === 0}