Skip to content

Commit a83cb3e

Browse files
author
Edward Xiao
committed
- Remove default tabIndex: -1 
1 parent 92e693c commit a83cb3e

File tree

6 files changed

+77
-59
lines changed

6 files changed

+77
-59
lines changed

‎example/index.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const markdownTextboxEmptyExample = `
1616
import { Textbox } from 'react-inputs-validation';
1717
1818
<Textbox
19-
tabIndex="1" // Optional.[String or Number].Default: -1.
19+
tabIndex="1" // Optional.[String or Number].Default: none.
2020
id={'Name'} // Optional.[String].Default: "". Input ID.
2121
name="Name" // Optional.[String].Default: "". Input name.
2222
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -41,7 +41,7 @@ const markdownTextboxRegexExample = `
4141
import { Textbox } from 'react-inputs-validation';
4242
4343
<Textbox
44-
tabIndex="1" // Optional.[String or Number].Default: -1.
44+
tabIndex="1" // Optional.[String or Number].Default: none.
4545
id={'Name'} // Optional.[String].Default: "". Input ID.
4646
name="Name" // Optional.[String].Default: "". Input name.
4747
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -65,7 +65,7 @@ const markdownTextboxNumberExample = `
6565
import { Textbox } from 'react-inputs-validation';
6666
6767
<Textbox
68-
tabIndex="1" // Optional.[String or Number].Default: -1.
68+
tabIndex="1" // Optional.[String or Number].Default: none.
6969
id={'Number'} // Optional.[String].Default: "". Input ID.
7070
name="Number" // Optional.[String].Default: "". Input name.
7171
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 = `
9090
import { Radiobox } from 'react-inputs-validation';
9191
9292
<Radiobox
93-
tabIndex={2} // Optional.[String or Number].Default: -1.
93+
tabIndex={2} // Optional.[String or Number].Default: none.
9494
id="job" // Optional.[String].Default: "". Input ID.
9595
name="job" // Optional.[String].Default: "". Input name.
9696
value={job} // Optional.[String].Default: "".
@@ -123,11 +123,12 @@ const markdownCheckboxEmptyExample = `
123123
import { Checkbox } from 'react-inputs-validation';
124124
125125
<Checkbox
126-
tabIndex="5" // Optional.[String or Number].Default: -1.
126+
tabIndex="5" // Optional.[String or Number].Default: none.
127127
id={'agreement'} // Optional.[String].Default: "". Input ID.
128128
name={'agreement'} // Optional.[String].Default: "". Input name
129129
value={agreement} // Required.[String].Default: "".
130130
onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
131+
checked={isAgreementChecked} // Required.[Bool].Default: false.
131132
onChange={(isAgreementChecked, e) => {
132133
this.setState({ isAgreementChecked });
133134
console.log(e);
@@ -151,7 +152,7 @@ const markdownSelectEmptyExample = `
151152
import { Select } from 'react-inputs-validation';
152153
153154
<Select
154-
tabIndex="6" // Optional.[String or Number].Default: -1.
155+
tabIndex="6" // Optional.[String or Number].Default: none.
155156
id={'country'} // Optional.[String].Default: "". Input ID.
156157
name={'country'} // Optional.[String].Default: "". Input name.
157158
value={country} // Optional.[String].Default: "".
@@ -196,7 +197,7 @@ const markdownTextareaEmptyExample = `
196197
import { Textarea } from 'react-inputs-validation';
197198
198199
<Textarea
199-
tabIndex="1" // Optional.[String or Number].Default: -1.
200+
tabIndex="1" // Optional.[String or Number].Default: none.
200201
id="description" // Optional.[String].Default: "". Textarea ID.
201202
name="description" // Optional.[String].Default: "". Input name.
202203
value={description} // Optional.[String].Default: "".
@@ -571,7 +572,7 @@ class Index extends Component {
571572
<div>
572573
<h1>Validate Textbox Empty by onBlur Example:</h1>
573574
<Textbox
574-
tabIndex="1" // Optional.[String or Number].Default: -1.
575+
tabIndex="1" // Optional.[String or Number].Default: none.
575576
id={'Name'} // Optional.[String].Default: "". Input ID.
576577
name="Name" // Optional.[String].Default: "". Input name.
577578
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -604,7 +605,7 @@ class Index extends Component {
604605
<div>
605606
<h1>Validate Textbox Regex by onBlur Example:</h1>
606607
<Textbox
607-
tabIndex="1" // Optional.[String or Number].Default: -1.
608+
tabIndex="1" // Optional.[String or Number].Default: none.
608609
id={'Name'} // Optional.[String].Default: "". Input ID.
609610
name="Name" // Optional.[String].Default: "". Input name.
610611
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -636,7 +637,7 @@ class Index extends Component {
636637
<div>
637638
<h1>Validate Textbox Number by onBlur Example:</h1>
638639
<Textbox
639-
tabIndex="1" // Optional.[String or Number].Default: -1.
640+
tabIndex="1" // Optional.[String or Number].Default: none.
640641
id={'Number'} // Optional.[String].Default: "". Input ID.
641642
name="Number" // Optional.[String].Default: "". Input name.
642643
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -674,7 +675,7 @@ class Index extends Component {
674675
<div>
675676
<h1>Validate Radiobox Empty by onBlur Example:</h1>
676677
<Radiobox
677-
tabIndex={2} // Optional.[String or Number].Default: -1.
678+
tabIndex={2} // Optional.[String or Number].Default: none.
678679
id="job" // Optional.[String].Default: "". Input ID.
679680
name="job" // Optional.[String].Default: "". Input name.
680681
value={job} // Optional.[String].Default: "".
@@ -716,7 +717,7 @@ class Index extends Component {
716717
<div>
717718
<h1>Validate Checkbox Empty by onBlur Example:</h1>
718719
<Checkbox
719-
tabIndex="5" // Optional.[String or Number].Default: -1.
720+
tabIndex="5" // Optional.[String or Number].Default: none.
720721
id={'agreement'} // Optional.[String].Default: "". Input ID.
721722
name={'agreement'} // Optional.[String].Default: "". Input name
722723
checked={isAgreementChecked} // Required.[Bool].Default: false.
@@ -752,7 +753,7 @@ class Index extends Component {
752753
<div>
753754
<h1>Validate Select Empty by onBlur Example:</h1>
754755
<Select
755-
tabIndex="6" // Optional.[String or Number].Default: -1.
756+
tabIndex="6" // Optional.[String or Number].Default: none.
756757
id={'country'} // Optional.[String].Default: "". Input ID.
757758
name={'country'} // Optional.[String].Default: "". Input name.
758759
value={country} // Optional.[String].Default: "".
@@ -803,7 +804,7 @@ class Index extends Component {
803804
<div>
804805
<h1>Validate Textarea Empty by onBlur Example:</h1>
805806
<Textarea
806-
tabIndex="1" // Optional.[String or Number].Default: -1.
807+
tabIndex="1" // Optional.[String or Number].Default: none.
807808
id="description" // Optional.[String].Default: "". Textarea ID.
808809
name="description" // Optional.[String].Default: "". Textarea name.
809810
value={description} // Optional.[String].Default: "".
@@ -843,7 +844,7 @@ class Index extends Component {
843844
</div>
844845
<div style={prefixAll({ flex: '6 6 0px' })}>
845846
<Textbox
846-
tabIndex="1" // Optional.[String or Number].Default: -1.
847+
tabIndex="1" // Optional.[String or Number].Default: none.
847848
id={'Name'} // Optional.[String].Default: "". Input ID.
848849
name="Name" // Optional.[String].Default: "". Input name.
849850
type="text" // Optional.[String].Default: "text". Input type [text, password, number].
@@ -904,7 +905,7 @@ class Index extends Component {
904905
</div>
905906
<div style={prefixAll({ flex: '6 6 0px', display: 'flex' })}>
906907
<Radiobox
907-
tabIndex={2} // Optional.[String or Number].Default: -1.
908+
tabIndex={2} // Optional.[String or Number].Default: none.
908909
id="job" // Optional.[String].Default: "". Input ID.
909910
name="job" // Optional.[String].Default: "". Input name.
910911
disabled={false} // Optional.[Bool].Default: false.
@@ -956,7 +957,7 @@ class Index extends Component {
956957
</div>
957958
<div style={prefixAll({ flex: '6 6 0px' })}>
958959
<Checkbox
959-
tabIndex="5" // Optional.[String or Number].Default: -1.
960+
tabIndex="5" // Optional.[String or Number].Default: none.
960961
id={'agreement'} // Optional.[String].Default: "". Input ID.
961962
name={'agreement'} // Optional.[String].Default: "". Input name
962963
value={agreement} // Required.[String].Default: "".
@@ -1006,7 +1007,7 @@ class Index extends Component {
10061007
</div>
10071008
<div style={prefixAll({ flex: '6 6 0px' })}>
10081009
<Select
1009-
tabIndex="6" // Optional.[String or Number].Default: -1.
1010+
tabIndex="6" // Optional.[String or Number].Default: none.
10101011
id={'country'} // Optional.[String].Default: "". Input ID.
10111012
name={'country'} // Optional.[String].Default: "". Input name.
10121013
value={country} // Optional.[String].Default: "".
@@ -1069,7 +1070,7 @@ class Index extends Component {
10691070
</div>
10701071
<div style={prefixAll({ flex: '6 6 0px' })}>
10711072
<Textarea
1072-
tabIndex="7" // Optional.[String or Number].Default: -1.
1073+
tabIndex="7" // Optional.[String or Number].Default: none.
10731074
id="description" // Optional.[String].Default: "". Textarea ID.
10741075
name="description" // Optional.[String].Default: "". Textarea name.
10751076
value={description} // Optional.[String].Default: "".

‎src/js/Inputs/Checkbox.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const getDefaultValidationOption = (obj: DefaultValidationOption) => {
3434
};
3535

3636
interface Props {
37-
tabIndex?: string | number;
37+
tabIndex?: string | number | undefined;
3838
id?: string;
3939
name?: string;
4040
value?: string | boolean;
@@ -59,7 +59,7 @@ interface Props {
5959
}
6060

6161
interface DefaultProps {
62-
tabIndex: string | number;
62+
tabIndex: string | number | undefined;
6363
id: string;
6464
name: string;
6565
value: string | boolean;
@@ -91,7 +91,7 @@ interface State {
9191

9292
class Index extends React.Component<Props, State> {
9393
static defaultProps: DefaultProps = {
94-
tabIndex: -1,
94+
tabIndex: undefined,
9595
id: '',
9696
name: '',
9797
value: '',
@@ -110,7 +110,7 @@ class Index extends React.Component<Props, State> {
110110
validationOption: {},
111111
onChange: () => {},
112112
};
113-
private input: React.RefObject<HTMLInputElement>;
113+
private wrapper: React.RefObject<HTMLDivElement>;
114114
constructor(props: any) {
115115
super(props);
116116
this.state = {
@@ -124,8 +124,9 @@ class Index extends React.Component<Props, State> {
124124
this.onClick = this.onClick.bind(this);
125125
this.onBlur = this.onBlur.bind(this);
126126
this.onFocus = this.onFocus.bind(this);
127-
this.input = React.createRef();
127+
this.wrapper = React.createRef();
128128
}
129+
129130
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
130131
if (nextProps.validate !== prevState.validate) {
131132
return {
@@ -139,6 +140,13 @@ class Index extends React.Component<Props, State> {
139140
}
140141
return null;
141142
}
143+
144+
componentDidMount() {
145+
if (this.wrapper.current && this.props.tabIndex) {
146+
this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
147+
}
148+
}
149+
142150
componentDidUpdate(prevProps: Props, prevState: State) {
143151
if (this.state.validate !== prevState.validate) {
144152
this.check();
@@ -154,7 +162,6 @@ class Index extends React.Component<Props, State> {
154162
this.setState({ checked });
155163
const { onChange } = this.props;
156164
onChange && onChange(checked, e);
157-
// when props.validate toggled
158165
if (this.state.err) {
159166
this.setState({ err: false });
160167
} else {
@@ -261,7 +268,7 @@ class Index extends React.Component<Props, State> {
261268
msgHtml = <div className={successMsgClass}>{successMsg}</div>;
262269
}
263270
return (
264-
<div tabIndex={Number(tabIndex)} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
271+
<div ref={this.wrapper} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
265272
<div className={containerClass} style={customStyleContainer}>
266273
<div className={boxClass} style={customStyleInputBox}>
267274
<div className={reactInputsValidationCss['box']} />
@@ -274,7 +281,6 @@ class Index extends React.Component<Props, State> {
274281
defaultChecked={checked}
275282
disabled={disabled}
276283
onChange={this.onChange}
277-
ref={this.input}
278284
/>
279285
</div>
280286
<label className={labelClass}>{labelHtml}</label>

‎src/js/Inputs/Radiobox.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ interface OptionListItem {
4747
}
4848

4949
interface Props {
50-
tabIndex?: string | number;
50+
tabIndex?: string | number | undefined;
5151
id?: string;
5252
name?: string;
5353
value?: string | number;
@@ -71,7 +71,7 @@ interface Props {
7171
}
7272

7373
interface DefaultProps {
74-
tabIndex: string | number;
74+
tabIndex: string | number | undefined;
7575
id: string;
7676
name: string;
7777
value: string | number;
@@ -102,7 +102,7 @@ interface State {
102102

103103
class Index extends React.Component<Props, State> {
104104
static defaultProps: DefaultProps = {
105-
tabIndex: -1,
105+
tabIndex: undefined,
106106
id: '',
107107
name: '',
108108
value: '',
@@ -120,6 +120,7 @@ class Index extends React.Component<Props, State> {
120120
validationOption: {},
121121
onChange: () => {},
122122
};
123+
private wrapper: React.RefObject<HTMLDivElement>;
123124
constructor(props: any) {
124125
super(props);
125126
this.state = {
@@ -133,6 +134,7 @@ class Index extends React.Component<Props, State> {
133134
this.onClick = this.onClick.bind(this);
134135
this.onBlur = this.onBlur.bind(this);
135136
this.onFocus = this.onFocus.bind(this);
137+
this.wrapper = React.createRef();
136138
}
137139

138140
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
@@ -153,6 +155,12 @@ class Index extends React.Component<Props, State> {
153155
return null;
154156
}
155157

158+
componentDidMount() {
159+
if (this.wrapper.current && this.props.tabIndex) {
160+
this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
161+
}
162+
}
163+
156164
componentDidUpdate(prevProps: Props, prevState: State) {
157165
if (this.state.validate !== prevState.validate) {
158166
this.check();
@@ -303,7 +311,7 @@ class Index extends React.Component<Props, State> {
303311
}
304312

305313
return (
306-
<div id={id} tabIndex={Number(tabIndex)} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
314+
<div ref={this.wrapper} id={id} className={wrapperClass} style={customStyleWrapper} onClick={this.onClick} onBlur={this.onBlur} onFocus={this.onFocus}>
307315
<div className={containerClass} style={customStyleContainer}>
308316
{optionHtml}
309317
</div>

0 commit comments

Comments
 (0)