Skip to content

Commit 78eb55a

Browse files
author
Edward Xiao
committed
- Remove default tabIndex: -1 
1 parent 1b613a0 commit 78eb55a

File tree

9 files changed

+72
-49
lines changed

9 files changed

+72
-49
lines changed

‎lib/components/Checkbox.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ function (_React$Component) {
114114

115115
_this = _possibleConstructorReturn(this, _getPrototypeOf(Index).call(this, props));
116116

117-
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "input", void 0);
117+
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "wrapper", void 0);
118118

119119
_this.state = {
120120
err: false,
@@ -127,11 +127,18 @@ function (_React$Component) {
127127
_this.onClick = _this.onClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
128128
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
129129
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
130-
_this.input = React.createRef();
130+
_this.wrapper = React.createRef();
131131
return _this;
132132
}
133133

134134
_createClass(Index, [{
135+
key: "componentDidMount",
136+
value: function componentDidMount() {
137+
if (this.wrapper.current && this.props.tabIndex) {
138+
this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
139+
}
140+
}
141+
}, {
135142
key: "componentDidUpdate",
136143
value: function componentDidUpdate(prevProps, prevState) {
137144
if (this.state.validate !== prevState.validate) {
@@ -152,7 +159,7 @@ function (_React$Component) {
152159
checked: checked
153160
});
154161
var onChange = this.props.onChange;
155-
onChange && onChange(checked, e); // when props.validate toggled
162+
onChange && onChange(checked, e);
156163

157164
if (this.state.err) {
158165
this.setState({
@@ -303,7 +310,7 @@ function (_React$Component) {
303310
}
304311

305312
return React.createElement("div", {
306-
tabIndex: Number(tabIndex),
313+
ref: this.wrapper,
307314
className: wrapperClass,
308315
style: customStyleWrapper,
309316
onClick: this.onClick,
@@ -325,8 +332,7 @@ function (_React$Component) {
325332
value: String(value),
326333
defaultChecked: checked,
327334
disabled: disabled,
328-
onChange: this.onChange,
329-
ref: this.input
335+
onChange: this.onChange
330336
})), React.createElement("label", {
331337
className: labelClass
332338
}, labelHtml)), msgHtml);
@@ -354,7 +360,7 @@ function (_React$Component) {
354360
}(React.Component);
355361

356362
_defineProperty(Index, "defaultProps", {
357-
tabIndex: -1,
363+
tabIndex: undefined,
358364
id: '',
359365
name: '',
360366
value: '',

‎lib/components/Radiobox.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,9 @@ function (_React$Component) {
123123
_classCallCheck(this, Index);
124124

125125
_this = _possibleConstructorReturn(this, _getPrototypeOf(Index).call(this, props));
126+
127+
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "wrapper", void 0);
128+
126129
_this.state = {
127130
err: false,
128131
msg: '',
@@ -134,10 +137,18 @@ function (_React$Component) {
134137
_this.onClick = _this.onClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
135138
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
136139
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
140+
_this.wrapper = React.createRef();
137141
return _this;
138142
}
139143

140144
_createClass(Index, [{
145+
key: "componentDidMount",
146+
value: function componentDidMount() {
147+
if (this.wrapper.current && this.props.tabIndex) {
148+
this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
149+
}
150+
}
151+
}, {
141152
key: "componentDidUpdate",
142153
value: function componentDidUpdate(prevProps, prevState) {
143154
if (this.state.validate !== prevState.validate) {
@@ -321,8 +332,8 @@ function (_React$Component) {
321332
}
322333

323334
return React.createElement("div", {
335+
ref: this.wrapper,
324336
id: id,
325-
tabIndex: Number(tabIndex),
326337
className: wrapperClass,
327338
style: customStyleWrapper,
328339
onClick: this.onClick,
@@ -364,7 +375,7 @@ function (_React$Component) {
364375
}(React.Component);
365376

366377
_defineProperty(Index, "defaultProps", {
367-
tabIndex: -1,
378+
tabIndex: undefined,
368379
id: '',
369380
name: '',
370381
value: '',

‎lib/components/Select.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,6 @@ function (_React$Component) {
144144

145145
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "itemsWrapper", void 0);
146146

147-
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "input", void 0);
148-
149147
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "optionItems", void 0);
150148

151149
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "focus", void 0);
@@ -174,7 +172,6 @@ function (_React$Component) {
174172
_this.pageClick = _this.pageClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
175173
_this.wrapper = React.createRef();
176174
_this.itemsWrapper = React.createRef();
177-
_this.input = React.createRef();
178175
_this.optionItems = [];
179176
_this.focus = false;
180177
_this.corrected = false;
@@ -187,10 +184,9 @@ function (_React$Component) {
187184
value: function componentDidMount() {
188185
window.addEventListener('mousedown', this.pageClick);
189186
window.addEventListener('touchstart', this.pageClick);
190-
var node = this.wrapper.current;
191187

192-
if (node) {
193-
node.addEventListener('keydown', this.onKeyDown);
188+
if (this.wrapper.current && this.props.tabIndex) {
189+
this.wrapper.current.setAttribute('tabindex', String(this.props.tabIndex));
194190
}
195191
}
196192
}, {
@@ -199,6 +195,10 @@ function (_React$Component) {
199195
if (prevState.show !== this.state.show) {
200196
if (this.state.show) {
201197
this.resetCurrentFocus();
198+
199+
if (this.wrapper.current) {
200+
this.wrapper.current.addEventListener('keydown', this.onKeyDown);
201+
}
202202
}
203203
}
204204

@@ -696,7 +696,7 @@ function (_React$Component) {
696696
}
697697

698698
return React.createElement("div", {
699-
tabIndex: Number(tabIndex),
699+
ref: this.wrapper,
700700
id: reactInputsValidationCss['select__wrapper'],
701701
className: wrapperClass,
702702
style: customStyleWrapper,
@@ -706,8 +706,7 @@ function (_React$Component) {
706706
!disabled ? _this3.toggleShow(!show) : "";
707707
},
708708
onFocus: this.onFocus,
709-
onBlur: this.onBlur,
710-
ref: this.wrapper
709+
onBlur: this.onBlur
711710
}, React.createElement("div", {
712711
className: containerClass,
713712
style: customStyleContainer
@@ -717,8 +716,7 @@ function (_React$Component) {
717716
type: "hidden",
718717
value: value,
719718
className: inputClass,
720-
onChange: function onChange() {},
721-
ref: this.input
719+
onChange: function onChange() {}
722720
}), React.createElement("div", {
723721
className: selectClass,
724722
style: customStyleSelect
@@ -751,7 +749,7 @@ function (_React$Component) {
751749
}(React.Component);
752750

753751
_defineProperty(Index, "defaultProps", {
754-
tabIndex: -1,
752+
tabIndex: undefined,
755753
id: '',
756754
name: '',
757755
value: '',

‎lib/components/Textarea.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ function (_React$Component) {
147147

148148
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "value", void 0);
149149

150+
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "textarea", void 0);
151+
150152
_this.state = {
151153
err: false,
152154
msg: '',
@@ -158,10 +160,18 @@ function (_React$Component) {
158160
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
159161
_this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized(_assertThisInitialized(_this)));
160162
_this.value = props.value;
163+
_this.textarea = React.createRef();
161164
return _this;
162165
}
163166

164167
_createClass(Index, [{
168+
key: "componentDidMount",
169+
value: function componentDidMount() {
170+
if (this.textarea.current && this.props.tabIndex) {
171+
this.textarea.current.setAttribute('tabindex', String(this.props.tabIndex));
172+
}
173+
}
174+
}, {
165175
key: "componentDidUpdate",
166176
value: function componentDidUpdate(prevProps, prevState) {
167177
if (this.state.validate !== prevState.validate) {
@@ -257,7 +267,7 @@ function (_React$Component) {
257267

258268
var _value = val || this.value;
259269

260-
var nameText = name ? name : ''; // CHECK EMPTY
270+
var nameText = name ? name : '';
261271

262272
if (required) {
263273
if (_validator.default.empty(_value)) {
@@ -267,14 +277,12 @@ function (_React$Component) {
267277
}
268278

269279
if (String(_value) !== '') {
270-
// CHECK REGEX
271280
if (reg) {
272281
if (_validator.default['reg'](reg, _value)) {
273282
this.handleCheckEnd(true, regMsg !== '' ? regMsg : _msg.invalid(nameText));
274283
return;
275284
}
276-
} // CHECK STRING
277-
285+
}
278286

279287
if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
280288
if (min || max) {
@@ -307,8 +315,7 @@ function (_React$Component) {
307315
}
308316
}
309317
}
310-
} // CHECK CUSTOM FUNCTION
311-
318+
}
312319

313320
if (customFunc && typeof customFunc === 'function') {
314321
var customFuncResult = customFunc(_value);
@@ -410,7 +417,6 @@ function (_React$Component) {
410417
className: containerClass,
411418
style: customStyleContainer
412419
}, React.createElement("textarea", {
413-
tabIndex: Number(tabIndex),
414420
id: id,
415421
name: name,
416422
value: value,
@@ -424,7 +430,8 @@ function (_React$Component) {
424430
style: customStyleInput,
425431
placeholder: placeholder,
426432
cols: Number(cols),
427-
rows: Number(rows)
433+
rows: Number(rows),
434+
ref: this.textarea
428435
})), msgHtml);
429436
}
430437
}], [{
@@ -444,7 +451,7 @@ function (_React$Component) {
444451
}(React.Component);
445452

446453
_defineProperty(Index, "defaultProps", {
447-
tabIndex: -1,
454+
tabIndex: undefined,
448455
id: '',
449456
name: '',
450457
type: 'text',

‎lib/components/Textbox.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,13 @@ function (_React$Component) {
164164
}
165165

166166
_createClass(Index, [{
167+
key: "componentDidMount",
168+
value: function componentDidMount() {
169+
if (this.input.current && this.props.tabIndex) {
170+
this.input.current.setAttribute('tabindex', String(this.props.tabIndex));
171+
}
172+
}
173+
}, {
167174
key: "componentDidUpdate",
168175
value: function componentDidUpdate(prevProps, prevState) {
169176
if (this.state.validate !== prevState.validate) {
@@ -292,14 +299,12 @@ function (_React$Component) {
292299
}
293300

294301
if (String(_value) !== '') {
295-
// CHECK REGEX
296302
if (reg) {
297303
if (_validator.default['reg'](reg, _value)) {
298304
this.handleCheckEnd(true, regMsg !== '' ? regMsg : _msg.invalid(nameText));
299305
return;
300306
}
301-
} // CHECK STRING
302-
307+
}
303308

304309
if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
305310
if (min || max) {
@@ -331,8 +336,7 @@ function (_React$Component) {
331336
return;
332337
}
333338
}
334-
} // CHECK NUMBER
335-
339+
}
336340

337341
if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
338342
if (!_validator.default[type](_value)) {
@@ -369,17 +373,15 @@ function (_React$Component) {
369373
return;
370374
}
371375
}
372-
} // CHECK EQUAL
373-
376+
}
374377

375378
if (compare && compare !== '') {
376379
if (_value !== compare) {
377380
this.handleCheckEnd(true, _msg.twoInputsNotEqual());
378381
return;
379382
}
380383
}
381-
} // CHECK CUSTOM FUNCTION
382-
384+
}
383385

384386
if (customFunc && typeof customFunc === 'function') {
385387
var customFuncResult = customFunc(_value);
@@ -504,7 +506,6 @@ function (_React$Component) {
504506
className: containerClass,
505507
style: customStyleContainer
506508
}, React.createElement("input", {
507-
tabIndex: Number(tabIndex),
508509
id: id,
509510
name: name,
510511
type: type,
@@ -539,7 +540,7 @@ function (_React$Component) {
539540
}(React.Component);
540541

541542
_defineProperty(Index, "defaultProps", {
542-
tabIndex: -1,
543+
tabIndex: undefined,
543544
id: '',
544545
name: '',
545546
type: 'text',

‎lib/react-inputs-validation.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)