| name | String | - | sets the name of the generated input |
| onOpen | Function({ open }) | | when TimePicker panel is opened |
| onClose | Function({ open }) | | when TimePicker panel is opened |
+| focusOnOpen | Boolean | false | automatically focus the input when the picker opens |
## Test Case
return (
<div>
<button onClick={this.toggleOpen}>Toggle open</button>
- <TimePicker open={this.state.open} onOpen={this.setOpen} onClose={this.setOpen} />
+ <TimePicker
+ open={this.state.open}
+ onOpen={this.setOpen}
+ onClose={this.setOpen}
+ focusOnOpen
+ />
</div>
);
}
allowEmpty: PropTypes.bool,
defaultOpenValue: PropTypes.object,
currentSelectPanel: PropTypes.string,
+ focusOnOpen: PropTypes.bool,
onKeyDown: PropTypes.func,
};
};
}
+ componentDidMount() {
+ if (this.props.focusOnOpen) {
+ // Wait one frame for the panel to be positioned before focusing
+ const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout);
+ requestAnimationFrame(() => {
+ this.refs.input.focus();
+ this.refs.input.select();
+ });
+ }
+ }
+
componentWillReceiveProps(nextProps) {
const { value, format } = nextProps;
this.setState({
onClear: PropTypes.func,
use12Hours: PropTypes.bool,
addon: PropTypes.func,
+ focusOnOpen: PropTypes.bool,
onKeyDown: PropTypes.func,
};
const {
prefixCls, className, placeholder, disabledHours, disabledMinutes,
disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
- format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, onKeyDown,
+ format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen, onKeyDown,
} = this.props;
const {
value, currentSelectPanel,
onChange={this.onChange}
onClear={onClear}
allowEmpty={allowEmpty}
+ focusOnOpen={focusOnOpen}
onKeyDown={onKeyDown}
/>
<Combobox
name: PropTypes.string,
autoComplete: PropTypes.string,
use12Hours: PropTypes.bool,
+ focusOnOpen: PropTypes.bool,
onKeyDown: PropTypes.func,
};
onBlur: noop,
addon: noop,
use12Hours: false,
+ focusOnOpen: false,
onKeyDown: noop,
};
prefixCls, placeholder, disabledHours,
disabledMinutes, disabledSeconds, hideDisabledOptions,
allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
- addon, use12Hours, onKeyDown,
+ addon, use12Hours, focusOnOpen, onKeyDown,
} = this.props;
return (
<Panel
hideDisabledOptions={hideDisabledOptions}
use12Hours={use12Hours}
addon={addon}
+ focusOnOpen={focusOnOpen}
onKeyDown={onKeyDown}
/>
);
done();
});
});
+
+ it('focus on open', (done) => {
+ const picker = renderPicker({
+ focusOnOpen: true,
+ });
+ expect(picker.state.open).not.to.be.ok();
+ const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
+ 'rc-time-picker-input')[0];
+ let header;
+ async.series([(next) => {
+ expect(picker.state.open).to.be(false);
+
+ Simulate.click(input);
+ setTimeout(next, 100);
+ }, (next) => {
+ // this touches the focusOnOpen code, but we cannot verify the input is in focus
+ expect(picker.state.open).to.be(true);
+ header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
+ 'rc-time-picker-panel-input')[0];
+ expect(header).to.be.ok();
+ expect((header).value).to.be('01:02:03');
+ expect((input).value).to.be('01:02:03');
+
+ next();
+ }], () => {
+ done();
+ });
+ });
});
});