From 2a30466c5756c03256b935dc9911529a3b0dc1c0 Mon Sep 17 00:00:00 2001
From: Damian Sznajder <damsznajder@gmail.com>
Date: Wed, 14 Aug 2019 23:23:25 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Possibility=20to=20paste=20to=20fir?=
 =?UTF-8?q?st=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/OtpInput.tsx | 14 +++++++++-----
 src/index.tsx    | 22 ++++++++++++++--------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/OtpInput.tsx b/src/OtpInput.tsx
index 85fc03d..1fb84fa 100644
--- a/src/OtpInput.tsx
+++ b/src/OtpInput.tsx
@@ -18,13 +18,16 @@ interface Props {
   clearTextOnFocus?: boolean
   containerStyles?: StyleProp<ViewStyle>
   error?: boolean
-  focusedBorderColor?: string
+  firstInput: boolean
   focusStyles?: StyleProp<ViewStyle>
+  focusedBorderColor?: string
   handleBackspace: (
     event: NativeSyntheticEvent<TextInputKeyPressEventData>,
   ) => void
   inputStyles?: StyleProp<TextStyle>
   keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad'
+  numberOfInputs: number
+  placeholder?: string
   secureTextEntry?: boolean
   selectTextOnFocus?: boolean
   testID: string
@@ -32,7 +35,6 @@ interface Props {
   unfocusedBorderColor?: string
   updateText: (event: NativeSyntheticEvent<TextInputChangeEventData>) => void
   value?: string
-  placeholder?: string
 }
 
 interface State {
@@ -62,12 +64,15 @@ export default class OtpInput extends PureComponent<Props, State> {
     const {
       clearTextOnFocus,
       containerStyles,
-      focusStyles,
       error,
+      firstInput,
+      focusStyles,
       focusedBorderColor,
       handleBackspace,
       inputStyles,
       keyboardType,
+      numberOfInputs,
+      placeholder,
       secureTextEntry,
       selectTextOnFocus,
       testID,
@@ -75,7 +80,6 @@ export default class OtpInput extends PureComponent<Props, State> {
       unfocusedBorderColor,
       updateText,
       value,
-      placeholder,
     } = this.props
 
     return (
@@ -94,7 +98,7 @@ export default class OtpInput extends PureComponent<Props, State> {
         <TextInput
           clearTextOnFocus={clearTextOnFocus}
           keyboardType={keyboardType}
-          maxLength={1}
+          maxLength={firstInput ? numberOfInputs : 1}
           onBlur={this._onBlur}
           onChange={updateText}
           onFocus={this._onFocus}
diff --git a/src/index.tsx b/src/index.tsx
index e3871aa..39d974e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -21,21 +21,21 @@ interface Props {
   errorMessage?: string
   errorMessageContainerStyles?: StyleProp<ViewStyle>
   errorMessageTextStyles?: StyleProp<TextStyle>
-  focusedBorderColor: string
   focusStyles?: StyleProp<ViewStyle>
+  focusedBorderColor: string
   handleChange: (otpCode: string) => void
   inputContainerStyles?: StyleProp<ViewStyle>
-  inputsContainerStyles?: StyleProp<ViewStyle>
   inputStyles?: StyleProp<TextStyle>
   inputTextErrorColor: string
+  inputsContainerStyles?: StyleProp<ViewStyle>
+  isRTL: boolean
   keyboardType: 'default' | 'email-address' | 'numeric' | 'phone-pad'
   numberOfInputs: number
+  placeholder: string
   secureTextEntry: boolean
   selectTextOnFocus: boolean
   testIDPrefix: string
   unfocusedBorderColor: string
-  isRTL: boolean
-  placeholder: string
 }
 
 interface State {
@@ -151,9 +151,12 @@ export default class OtpInputs extends PureComponent<Props, State> {
     event: TextInputOnChangeEventData,
     index: number,
   ): void => {
+    const { numberOfInputs } = this.props
     const { text } = event.nativeEvent
 
-    if (text) {
+    if (text.length === numberOfInputs) {
+      this._handleAfterOtpAction(text.split(''), numberOfInputs, true)
+    } else if (text) {
       let otpArray = this.state.otpCode
       otpArray[index] = text[text.length - 1]
       this._handleAfterOtpAction(otpArray, index + 1)
@@ -168,6 +171,7 @@ export default class OtpInputs extends PureComponent<Props, State> {
       const { handleChange, numberOfInputs } = this.props
       const otpCode = this.state.otpCode
       otpCode[index] = ''
+      this.inputs[index].current.clear()
 
       handleChange(otpCode.join(''))
       this.setState({ otpCode })
@@ -215,18 +219,20 @@ export default class OtpInputs extends PureComponent<Props, State> {
           autoCapitalize={autoCapitalize}
           clearTextOnFocus={clearTextOnFocus}
           containerStyles={inputContainerStyles}
-          focusStyles={focusStyles}
           error={!!errorMessage}
+          firstInput={index === 0}
+          focusStyles={focusStyles}
           focusedBorderColor={focusedBorderColor}
           handleBackspace={(event: TextInputOnKeyPressEventData) =>
             this._handleBackspace(event, inputIndex)
           }
-          placeholder={placeholder.toString()}
           inputStyles={inputStyles}
           key={inputIndex}
-          secureTextEntry={secureTextEntry}
           keyboardType={keyboardType}
+          numberOfInputs={numberOfInputs}
+          placeholder={placeholder}
           ref={this.inputs[inputIndex]}
+          secureTextEntry={secureTextEntry}
           selectTextOnFocus={selectTextOnFocus}
           textErrorColor={inputTextErrorColor}
           unfocusedBorderColor={unfocusedBorderColor}