no message

edwardfxiao · Mar 7, 2019 · 1408dbb · 1408dbb
1 parent 513d7bf
commit 1408dbb
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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>