diff --git a/src/Header.jsx b/src/Header.jsx index 21d557ed..af480cfe 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -20,6 +20,7 @@ class Header extends Component { onChange: PropTypes.func, onClear: PropTypes.func, onEsc: PropTypes.func, + onTab: PropTypes.func, allowEmpty: PropTypes.bool, defaultOpenValue: PropTypes.object, currentSelectPanel: PropTypes.string, @@ -140,11 +141,12 @@ class Header extends Component { } onKeyDown = (e) => { - const { onEsc, onKeyDown } = this.props; + const { onEsc, onTab, onKeyDown } = this.props; if (e.keyCode === 27) { onEsc(); + } else if (e.keyCode === 9) { + onTab(e.shiftKey); } - onKeyDown(e); } diff --git a/src/Panel.jsx b/src/Panel.jsx index 648944d5..95335cc3 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -34,6 +34,7 @@ class Panel extends Component { hideDisabledOptions: PropTypes.bool, onChange: PropTypes.func, onEsc: PropTypes.func, + onTab: PropTypes.func, allowEmpty: PropTypes.bool, showHour: PropTypes.bool, showMinute: PropTypes.bool, @@ -144,6 +145,7 @@ class Panel extends Component { value={value} currentSelectPanel={currentSelectPanel} onEsc={onEsc} + onTab={onTab} format={format} placeholder={placeholder} hourOptions={hourOptions} diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 26166f48..66ca33c3 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -130,6 +130,22 @@ export default class Picker extends Component { this.focus(); } + onTab = (toPrevious) => { + this.setOpen(false); + + const allInputs = document.querySelectorAll('input,textarea,select'); + for (let i = 0; i < allInputs.length; i++) { + if (allInputs[i] === this.picker) { + if (toPrevious === true && i !== 0) { + allInputs[i - 1].focus(); + } else if (i !== allInputs.length - 1) { + allInputs[i + 1].focus(); + } + break; + } + } + } + onKeyDown = (e) => { if (e.keyCode === 40) { this.setOpen(true); @@ -189,6 +205,7 @@ export default class Picker extends Component { showMinute={showMinute} showSecond={showSecond} onEsc={this.onEsc} + onTab={this.onTab} allowEmpty={allowEmpty} format={this.getFormat()} placeholder={placeholder}