From 1408dbbf58d74624136a61b3dc041c03c326a119 Mon Sep 17 00:00:00 2001
From: Edward Xiao <edwardfhsiao@gmail.com>
Date: Thu, 7 Mar 2019 18:45:36 +0800
Subject: [PATCH] no message

---
 example/index.js           | 38 +++++++++++++++++++-------------------
 src/js/Inputs/Checkbox.tsx | 22 ++++++++++++++--------
 src/js/Inputs/Radiobox.tsx | 16 ++++++++++++----
 src/js/Inputs/Select.tsx   | 21 ++++++++++-----------
 src/js/Inputs/Textarea.tsx | 20 ++++++++++++--------
 src/js/Inputs/Textbox.tsx  | 18 +++++++++---------
 6 files changed, 76 insertions(+), 59 deletions(-)

diff --git a/example/index.js b/example/index.js
index 81fba54..df47762 100644
--- a/example/index.js
+++ b/example/index.js
@@ -16,7 +16,7 @@ const markdownTextboxEmptyExample = `
 import { Textbox } from 'react-inputs-validation';
 
 <Textbox
-  tabIndex="1" // Optional.[String or Number].Default: -1.
+  tabIndex="1" // Optional.[String or Number].Default: none.
   id={'Name'} // Optional.[String].Default: "".  Input ID.
   name="Name" // Optional.[String].Default: "". Input name.
   type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -41,7 +41,7 @@ const markdownTextboxRegexExample = `
 import { Textbox } from 'react-inputs-validation';
 
 <Textbox
-  tabIndex="1" // Optional.[String or Number].Default: -1.
+  tabIndex="1" // Optional.[String or Number].Default: none.
   id={'Name'} // Optional.[String].Default: "".  Input ID.
   name="Name" // Optional.[String].Default: "". Input name.
   type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -65,7 +65,7 @@ const markdownTextboxNumberExample = `
 import { Textbox } from 'react-inputs-validation';
 
 <Textbox
-  tabIndex="1" // Optional.[String or Number].Default: -1.
+  tabIndex="1" // Optional.[String or Number].Default: none.
   id={'Number'} // Optional.[String].Default: "".  Input ID.
   name="Number" // Optional.[String].Default: "". Input name.
   type="text" // Optional.[String].Default: "text". Input type [text, password, number]. NOTE: provide "text" for better performance since different browsers run differently with "number".
@@ -90,7 +90,7 @@ const markdownRadioboxEmptyExample = `
 import { Radiobox } from 'react-inputs-validation';
 
 <Radiobox
-  tabIndex={2} // Optional.[String or Number].Default: -1.
+  tabIndex={2} // Optional.[String or Number].Default: none.
   id="job" // Optional.[String].Default: "".  Input ID.
   name="job" // Optional.[String].Default: "". Input name.
   value={job} // Optional.[String].Default: "".
@@ -123,7 +123,7 @@ const markdownCheckboxEmptyExample = `
 import { Checkbox } from 'react-inputs-validation';
 
 <Checkbox
-  tabIndex="5" // Optional.[String or Number].Default: -1.
+  tabIndex="5" // Optional.[String or Number].Default: none.
   id={'agreement'} // Optional.[String].Default: "".  Input ID.
   name={'agreement'} // Optional.[String].Default: "". Input name
   value={agreement} // Required.[String].Default: "".
@@ -152,7 +152,7 @@ const markdownSelectEmptyExample = `
 import { Select } from 'react-inputs-validation';
 
 <Select
-  tabIndex="6" // Optional.[String or Number].Default: -1.
+  tabIndex="6" // Optional.[String or Number].Default: none.
   id={'country'} // Optional.[String].Default: "". Input ID.
   name={'country'} // Optional.[String].Default: "". Input name.
   value={country} // Optional.[String].Default: "".
@@ -197,7 +197,7 @@ const markdownTextareaEmptyExample = `
 import { Textarea } from 'react-inputs-validation';
 
 <Textarea
-  tabIndex="1" // Optional.[String or Number].Default: -1.
+  tabIndex="1" // Optional.[String or Number].Default: none.
   id="description" // Optional.[String].Default: "".  Textarea ID.
   name="description" // Optional.[String].Default: "". Input name.
   value={description} // Optional.[String].Default: "".
@@ -572,7 +572,7 @@ class Index extends Component {
                 <div>
                   <h1>Validate Textbox Empty by onBlur Example:</h1>
                   <Textbox
-                    tabIndex="1" // Optional.[String or Number].Default: -1.
+                    tabIndex="1" // Optional.[String or Number].Default: none.
                     id={'Name'} // Optional.[String].Default: "".  Input ID.
                     name="Name" // Optional.[String].Default: "". Input name.
                     type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -605,7 +605,7 @@ class Index extends Component {
                 <div>
                   <h1>Validate Textbox Regex by onBlur Example:</h1>
                   <Textbox
-                    tabIndex="1" // Optional.[String or Number].Default: -1.
+                    tabIndex="1" // Optional.[String or Number].Default: none.
                     id={'Name'} // Optional.[String].Default: "".  Input ID.
                     name="Name" // Optional.[String].Default: "". Input name.
                     type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -637,7 +637,7 @@ class Index extends Component {
                 <div>
                   <h1>Validate Textbox Number by onBlur Example:</h1>
                   <Textbox
-                    tabIndex="1" // Optional.[String or Number].Default: -1.
+                    tabIndex="1" // Optional.[String or Number].Default: none.
                     id={'Number'} // Optional.[String].Default: "".  Input ID.
                     name="Number" // Optional.[String].Default: "". Input name.
                     type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -675,7 +675,7 @@ class Index extends Component {
                 <div>
                   <h1>Validate Radiobox Empty by onBlur Example:</h1>
                   <Radiobox
-                    tabIndex={2} // Optional.[String or Number].Default: -1.
+                    tabIndex={2} // Optional.[String or Number].Default: none.
                     id="job" // Optional.[String].Default: "".  Input ID.
                     name="job" // Optional.[String].Default: "". Input name.
                     value={job} // Optional.[String].Default: "".
@@ -717,7 +717,7 @@ class Index extends Component {
                 <div>
                   <h1>Validate Checkbox Empty by onBlur Example:</h1>
                   <Checkbox
-                    tabIndex="5" // Optional.[String or Number].Default: -1.
+                    tabIndex="5" // Optional.[String or Number].Default: none.
                     id={'agreement'} // Optional.[String].Default: "".  Input ID.
                     name={'agreement'} // Optional.[String].Default: "". Input name
                     checked={isAgreementChecked} // Required.[Bool].Default: false.
@@ -753,7 +753,7 @@ class Index extends Component {
                 <div>
                   <h1>Validate Select Empty by onBlur Example:</h1>
                   <Select
-                    tabIndex="6" // Optional.[String or Number].Default: -1.
+                    tabIndex="6" // Optional.[String or Number].Default: none.
                     id={'country'} // Optional.[String].Default: "". Input ID.
                     name={'country'} // Optional.[String].Default: "". Input name.
                     value={country} // Optional.[String].Default: "".
@@ -804,7 +804,7 @@ class Index extends Component {
                 <div>
                   <h1>Validate Textarea Empty by onBlur Example:</h1>
                   <Textarea
-                    tabIndex="1" // Optional.[String or Number].Default: -1.
+                    tabIndex="1" // Optional.[String or Number].Default: none.
                     id="description" // Optional.[String].Default: "".  Textarea ID.
                     name="description" // Optional.[String].Default: "". Textarea name.
                     value={description} // Optional.[String].Default: "".
@@ -844,7 +844,7 @@ class Index extends Component {
                   </div>
                   <div style={prefixAll({ flex: '6 6 0px' })}>
                     <Textbox
-                      tabIndex="1" // Optional.[String or Number].Default: -1.
+                      tabIndex="1" // Optional.[String or Number].Default: none.
                       id={'Name'} // Optional.[String].Default: "".  Input ID.
                       name="Name" // Optional.[String].Default: "". Input name.
                       type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -905,7 +905,7 @@ class Index extends Component {
                   </div>
                   <div style={prefixAll({ flex: '6 6 0px', display: 'flex' })}>
                     <Radiobox
-                      tabIndex={2} // Optional.[String or Number].Default: -1.
+                      tabIndex={2} // Optional.[String or Number].Default: none.
                       id="job" // Optional.[String].Default: "".  Input ID.
                       name="job" // Optional.[String].Default: "". Input name.
                       disabled={false} // Optional.[Bool].Default: false.
@@ -957,7 +957,7 @@ class Index extends Component {
                   </div>
                   <div style={prefixAll({ flex: '6 6 0px' })}>
                     <Checkbox
-                      tabIndex="5" // Optional.[String or Number].Default: -1.
+                      tabIndex="5" // Optional.[String or Number].Default: none.
                       id={'agreement'} // Optional.[String].Default: "".  Input ID.
                       name={'agreement'} // Optional.[String].Default: "". Input name
                       value={agreement} // Required.[String].Default: "".
@@ -1007,7 +1007,7 @@ class Index extends Component {
                   </div>
                   <div style={prefixAll({ flex: '6 6 0px' })}>
                     <Select
-                      tabIndex="6" // Optional.[String or Number].Default: -1.
+                      tabIndex="6" // Optional.[String or Number].Default: none.
                       id={'country'} // Optional.[String].Default: "". Input ID.
                       name={'country'} // Optional.[String].Default: "". Input name.
                       value={country} // Optional.[String].Default: "".
@@ -1070,7 +1070,7 @@ class Index extends Component {
                   </div>
                   <div style={prefixAll({ flex: '6 6 0px' })}>
                     <Textarea
-                      tabIndex="7" // Optional.[String or Number].Default: -1.
+                      tabIndex="7" // Optional.[String or Number].Default: none.
                       id="description" // Optional.[String].Default: "".  Textarea ID.
                       name="description" // Optional.[String].Default: "". Textarea name.
                       value={description} // Optional.[String].Default: "".
diff --git a/src/js/Inputs/Checkbox.tsx b/src/js/Inputs/Checkbox.tsx
index e474727..e87ffca 100644
--- a/src/js/Inputs/Checkbox.tsx
+++ b/src/js/Inputs/Checkbox.tsx
@@ -34,7 +34,7 @@ const getDefaultValidationOption = (obj: DefaultValidationOption) => {
 };
 
 interface Props {
-  tabIndex?: string | number;
+  tabIndex?: string | number | undefined;
   id?: string;
   name?: string;
   value?: string | boolean;
@@ -59,7 +59,7 @@ interface Props {
 }
 
 interface DefaultProps {
-  tabIndex: string | number;
+  tabIndex: string | number | undefined;
   id: string;
   name: string;
   value: string | boolean;
@@ -91,7 +91,7 @@ interface State {
 
 class Index extends React.Component<Props, State> {
   static defaultProps: DefaultProps = {
-    tabIndex: -1,
+    tabIndex: undefined,
     id: '',
     name: '',
     value: '',
@@ -110,7 +110,7 @@ class Index extends React.Component<Props, State> {
     validationOption: {},
     onChange: () => {},
   };
-  private input: React.RefObject<HTMLInputElement>;
+  private wrapper: React.RefObject<HTMLDivElement>;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -124,8 +124,9 @@ class Index extends React.Component<Props, State> {
     this.onClick = this.onClick.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onFocus = this.onFocus.bind(this);
-    this.input = React.createRef();
+    this.wrapper = React.createRef();
   }
+
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     if (nextProps.validate !== prevState.validate) {
       return {
@@ -139,6 +140,13 @@ class Index extends React.Component<Props, State> {
     }
     return null;
   }
+
+  componentDidMount() {
+    if (this.wrapper.current && this.props.tabIndex) {
+      this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
+    }
+  }
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.state.validate !== prevState.validate) {
       this.check();
@@ -154,7 +162,6 @@ class Index extends React.Component<Props, State> {
     this.setState({ checked });
     const { onChange } = this.props;
     onChange && onChange(checked, e);
-    // when props.validate toggled
     if (this.state.err) {
       this.setState({ err: false });
     } else {
@@ -261,7 +268,7 @@ class Index extends React.Component<Props, State> {
       msgHtml = <div className={successMsgClass}>{successMsg}</div>;
     }
     return (
-      <div tabIndex={Number(tabIndex)} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
+      <div ref={this.wrapper} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
         <div className={containerClass} style={customStyleContainer}>
           <div className={boxClass} style={customStyleInputBox}>
             <div className={reactInputsValidationCss['box']} />
@@ -274,7 +281,6 @@ class Index extends React.Component<Props, State> {
               defaultChecked={checked}
               disabled={disabled}
               onChange={this.onChange}
-              ref={this.input}
             />
           </div>
           <label className={labelClass}>{labelHtml}</label>
diff --git a/src/js/Inputs/Radiobox.tsx b/src/js/Inputs/Radiobox.tsx
index cf86345..873cffc 100644
--- a/src/js/Inputs/Radiobox.tsx
+++ b/src/js/Inputs/Radiobox.tsx
@@ -47,7 +47,7 @@ interface OptionListItem {
 }
 
 interface Props {
-  tabIndex?: string | number;
+  tabIndex?: string | number | undefined;
   id?: string;
   name?: string;
   value?: string | number;
@@ -71,7 +71,7 @@ interface Props {
 }
 
 interface DefaultProps {
-  tabIndex: string | number;
+  tabIndex: string | number | undefined;
   id: string;
   name: string;
   value: string | number;
@@ -102,7 +102,7 @@ interface State {
 
 class Index extends React.Component<Props, State> {
   static defaultProps: DefaultProps = {
-    tabIndex: -1,
+    tabIndex: undefined,
     id: '',
     name: '',
     value: '',
@@ -120,6 +120,7 @@ class Index extends React.Component<Props, State> {
     validationOption: {},
     onChange: () => {},
   };
+  private wrapper: React.RefObject<HTMLDivElement>;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -133,6 +134,7 @@ class Index extends React.Component<Props, State> {
     this.onClick = this.onClick.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onFocus = this.onFocus.bind(this);
+    this.wrapper = React.createRef();
   }
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
@@ -153,6 +155,12 @@ class Index extends React.Component<Props, State> {
     return null;
   }
 
+  componentDidMount() {
+    if (this.wrapper.current && this.props.tabIndex) {
+      this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
+    }
+  }
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.state.validate !== prevState.validate) {
       this.check();
@@ -303,7 +311,7 @@ class Index extends React.Component<Props, State> {
     }
 
     return (
-      <div id={id} tabIndex={Number(tabIndex)} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
+      <div ref={this.wrapper} id={id} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
         <div className={containerClass} style={customStyleContainer}>
           {optionHtml}
         </div>
diff --git a/src/js/Inputs/Select.tsx b/src/js/Inputs/Select.tsx
index 5d6a444..f4816b2 100644
--- a/src/js/Inputs/Select.tsx
+++ b/src/js/Inputs/Select.tsx
@@ -55,7 +55,7 @@ interface OptionListItem {
 }
 
 interface Props {
-  tabIndex?: string | number;
+  tabIndex?: string | number | undefined;
   id?: string;
   name?: string;
   value?: string | number;
@@ -85,7 +85,7 @@ interface Props {
 }
 
 interface DefaultProps {
-  tabIndex: string | number;
+  tabIndex: string | number | undefined;
   id: string;
   name: string;
   value: string | number;
@@ -125,7 +125,7 @@ interface Node {
 
 class Index extends React.Component<Props, State> {
   static defaultProps: Props = {
-    tabIndex: -1,
+    tabIndex: undefined,
     id: '',
     name: '',
     value: '',
@@ -147,7 +147,6 @@ class Index extends React.Component<Props, State> {
   };
   private wrapper: React.RefObject<HTMLInputElement>;
   private itemsWrapper: React.RefObject<HTMLInputElement>;
-  private input: React.RefObject<HTMLInputElement>;
   private optionItems: React.RefObject<HTMLInputElement>[];
   private focus: boolean;
   private corrected: boolean;
@@ -174,7 +173,6 @@ class Index extends React.Component<Props, State> {
     this.pageClick = this.pageClick.bind(this);
     this.wrapper = React.createRef();
     this.itemsWrapper = React.createRef();
-    this.input = React.createRef();
     this.optionItems = [];
     this.focus = false;
     this.corrected = false;
@@ -198,9 +196,8 @@ class Index extends React.Component<Props, State> {
   componentDidMount() {
     window.addEventListener('mousedown', this.pageClick);
     window.addEventListener('touchstart', this.pageClick);
-    const node = this.wrapper.current;
-    if (node) {
-      node.addEventListener('keydown', this.onKeyDown);
+    if (this.wrapper.current && this.props.tabIndex) {
+      this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
     }
   }
 
@@ -208,6 +205,9 @@ class Index extends React.Component<Props, State> {
     if (prevState.show !== this.state.show) {
       if (this.state.show) {
         this.resetCurrentFocus();
+        if (this.wrapper.current) {
+          this.wrapper.current.addEventListener('keydown', this.onKeyDown);
+        }
       }
     }
     if (this.state.validate !== prevState.validate) {
@@ -598,7 +598,7 @@ class Index extends React.Component<Props, State> {
     }
     return (
       <div
-        tabIndex={Number(tabIndex)}
+        ref={this.wrapper}
         id={reactInputsValidationCss['select__wrapper']}
         className={wrapperClass}
         style={customStyleWrapper}
@@ -608,10 +608,9 @@ class Index extends React.Component<Props, State> {
         }}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
-        ref={this.wrapper}
       >
         <div className={containerClass} style={customStyleContainer}>
-          <input id={id} name={name} type="hidden" value={value} className={inputClass} onChange={() => {}} ref={this.input} />
+          <input id={id} name={name} type="hidden" value={value} className={inputClass} onChange={() => {}} />
           <div className={selectClass} style={customStyleSelect}>
             {selectorHtml}
           </div>
diff --git a/src/js/Inputs/Textarea.tsx b/src/js/Inputs/Textarea.tsx
index 4df306b..51ad827 100644
--- a/src/js/Inputs/Textarea.tsx
+++ b/src/js/Inputs/Textarea.tsx
@@ -61,7 +61,7 @@ const getDefaultValidationOption = (obj: DefaultValidationOption) => {
 };
 
 interface Props {
-  tabIndex?: string | number;
+  tabIndex?: string | number | undefined;
   id?: string;
   name?: string;
   type?: string;
@@ -87,7 +87,7 @@ interface Props {
 }
 
 interface DefaultProps {
-  tabIndex: string | number;
+  tabIndex: string | number | undefined;
   id: string;
   name: string;
   value: string | number;
@@ -118,7 +118,7 @@ interface State {
 
 class Index extends React.Component<Props, State> {
   static defaultProps: Props = {
-    tabIndex: -1,
+    tabIndex: undefined,
     id: '',
     name: '',
     type: 'text',
@@ -139,6 +139,7 @@ class Index extends React.Component<Props, State> {
     onChange: () => {},
   };
   private value: string;
+  private textarea: any;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -152,6 +153,7 @@ class Index extends React.Component<Props, State> {
     this.onFocus = this.onFocus.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
     this.value = props.value;
+    this.textarea = React.createRef();
   }
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
@@ -163,6 +165,12 @@ class Index extends React.Component<Props, State> {
     return null;
   }
 
+  componentDidMount() {
+    if (this.textarea.current && this.props.tabIndex) {
+      this.textarea.current.setAttribute('tabindex', String(this.props.tabIndex));
+    }
+  }
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.state.validate !== prevState.validate) {
       this.check();
@@ -223,7 +231,6 @@ class Index extends React.Component<Props, State> {
         const msg = message[locale][TYPE];
         const value = val || this.value;
         const nameText = name ? name : '';
-        // CHECK EMPTY
         if (required) {
           if (validator.empty(value)) {
             this.handleCheckEnd(true, msg.empty(nameText));
@@ -231,14 +238,12 @@ class Index extends React.Component<Props, State> {
           }
         }
         if (String(value) !== '') {
-          // CHECK REGEX
           if (reg) {
             if (validator['reg'](reg, value)) {
               this.handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
               return;
             }
           }
-          // CHECK STRING
           if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
             if (min || max) {
               if (min && max) {
@@ -269,7 +274,6 @@ class Index extends React.Component<Props, State> {
             }
           }
         }
-        // CHECK CUSTOM FUNCTION
         if (customFunc && typeof customFunc === 'function') {
           const customFuncResult = customFunc(value);
           if (customFuncResult !== true) {
@@ -351,7 +355,6 @@ class Index extends React.Component<Props, State> {
       <div className={wrapperClass} style={customStyleWrapper}>
         <div className={containerClass} style={customStyleContainer}>
           <textarea
-            tabIndex={Number(tabIndex)}
             id={id}
             name={name}
             value={value}
@@ -366,6 +369,7 @@ class Index extends React.Component<Props, State> {
             placeholder={placeholder}
             cols={Number(cols)}
             rows={Number(rows)}
+            ref={this.textarea}
           />
         </div>
         {msgHtml}
diff --git a/src/js/Inputs/Textbox.tsx b/src/js/Inputs/Textbox.tsx
index 496fccf..8379968 100644
--- a/src/js/Inputs/Textbox.tsx
+++ b/src/js/Inputs/Textbox.tsx
@@ -63,7 +63,7 @@ const getDefaultValidationOption = (obj: DefaultValidationOption) => {
 };
 
 interface Props {
-  tabIndex?: string | number;
+  tabIndex?: string | number | undefined;
   id?: string;
   name?: string;
   type?: string;
@@ -88,7 +88,7 @@ interface Props {
 }
 
 interface DefaultProps {
-  tabIndex: string | number;
+  tabIndex: string | number | undefined;
   id: string;
   name: string;
   type: string;
@@ -120,7 +120,7 @@ interface State {
 
 class Index extends React.Component<Props, State> {
   static defaultProps: Props = {
-    tabIndex: -1,
+    tabIndex: undefined,
     id: '',
     name: '',
     type: 'text',
@@ -165,6 +165,12 @@ class Index extends React.Component<Props, State> {
     return null;
   }
 
+  componentDidMount() {
+    if (this.input.current && this.props.tabIndex) {
+      this.input.current.setAttribute('tabindex', String(this.props.tabIndex));
+    }
+  }
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.state.validate !== prevState.validate) {
       this.check();
@@ -247,14 +253,12 @@ class Index extends React.Component<Props, State> {
           }
         }
         if (String(value) !== '') {
-          // CHECK REGEX
           if (reg) {
             if (validator['reg'](reg, value)) {
               this.handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
               return;
             }
           }
-          // CHECK STRING
           if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
             if (min || max) {
               if (min && max) {
@@ -284,7 +288,6 @@ class Index extends React.Component<Props, State> {
               }
             }
           }
-          // CHECK NUMBER
           if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
             if (!validator[type](value)) {
               this.handleCheckEnd(true, msg.invalid(nameText));
@@ -318,7 +321,6 @@ class Index extends React.Component<Props, State> {
               }
             }
           }
-          // CHECK EQUAL
           if (compare && compare !== '') {
             if (value !== compare) {
               this.handleCheckEnd(true, msg.twoInputsNotEqual());
@@ -326,7 +328,6 @@ class Index extends React.Component<Props, State> {
             }
           }
         }
-        // CHECK CUSTOM FUNCTION
         if (customFunc && typeof customFunc === 'function') {
           const customFuncResult = customFunc(value);
           if (customFuncResult !== true) {
@@ -428,7 +429,6 @@ class Index extends React.Component<Props, State> {
       <div className={wrapperClass} style={customStyleWrapper}>
         <div className={containerClass} style={customStyleContainer}>
           <input
-            tabIndex={Number(tabIndex)}
             id={id}
             name={name}
             type={type}