update auto fill mobile chrome

hunghg255 · May 22, 2023 · e4262e5 · Datta-Telukunta · Sep 26, 2023 · e4262e5
1 parent 9c95575
commit e4262e5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactjs-otp-input",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A fully customizable, one-time password input component for the web built with React",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/lib/index.jsx b/src/lib/index.jsx
@@ -101,7 +101,7 @@ class SingleOtpInput extends PureComponent {
             hasErrored && errorStyle
           )}
           type={this.getType()}
-          maxLength="1"
+          // maxLength='1'
           ref={this.input}
           disabled={isDisabled}
           value={value ? value : ''}
@@ -220,9 +220,15 @@ class OtpInput extends Component {
     });
   };
 
-  handleOnChange = (e) => {
+  handleOnChange = (idx) => (e) => {
     const { value } = e.target;
 
+    // Fix Fill value
+    if (idx === 0 && value.length === this.props.numInputs) {
+      this.handleOtpChange(value.split(''));
+      return;
+    }
+
     if (this.isInputValueValid(value)) {
       this.changeCodeAtFocus(value);
     }
@@ -298,7 +304,7 @@ class OtpInput extends Component {
           index={i}
           focus={activeInput === i}
           value={otp && otp[i]}
-          onChange={this.handleOnChange}
+          onChange={this.handleOnChange(i)}
           onKeyDown={this.handleOnKeyDown}
           onInput={this.handleOnInput}
           onPaste={this.handleOnPaste}