From 7440ae22b87a3673ef84315420cd4df550ad93fb Mon Sep 17 00:00:00 2001 From: Sun Lee Date: Fri, 16 Jun 2017 15:31:20 -0400 Subject: Fix Select max-height and overflow --- assets/index/Select.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/index/Select.less b/assets/index/Select.less index 8bec4a0..ecef8a8 100644 --- a/assets/index/Select.less +++ b/assets/index/Select.less @@ -6,7 +6,8 @@ margin-left: -1px; box-sizing: border-box; width: 56px; - overflow: hidden; + max-height: 144px; + overflow-y: auto; position: relative; // Fix chrome weird render bug &-active { @@ -28,7 +29,6 @@ margin: 0; padding: 0; width: 100%; - max-height: 144px; } li { -- cgit v1.2.3 From d18ecfb67877d8bdfc54e47a214d3afab52b7bda Mon Sep 17 00:00:00 2001 From: Levi Lansing Date: Wed, 27 Sep 2017 23:20:55 -0400 Subject: add focusOnOpen option (#61) --- README.md | 1 + examples/open.js | 7 ++++++- src/Header.jsx | 9 +++++++++ src/Panel.jsx | 4 +++- src/TimePicker.jsx | 5 ++++- 5 files changed, 23 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a2758b9..0698d7d 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,7 @@ API | 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 diff --git a/examples/open.js b/examples/open.js index 8e4f5de..12d8a8d 100644 --- a/examples/open.js +++ b/examples/open.js @@ -22,7 +22,12 @@ class App extends React.Component { return (
- +
); } diff --git a/src/Header.jsx b/src/Header.jsx index 91e8549..9e80a9c 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -22,6 +22,7 @@ class Header extends Component { allowEmpty: PropTypes.bool, defaultOpenValue: PropTypes.object, currentSelectPanel: PropTypes.string, + focusOnOpen: PropTypes.bool, }; constructor(props) { @@ -33,6 +34,14 @@ class Header extends Component { }; } + 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()); + } + } + componentWillReceiveProps(nextProps) { const { value, format } = nextProps; this.setState({ diff --git a/src/Panel.jsx b/src/Panel.jsx index 1953ad4..deeba52 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -40,6 +40,7 @@ class Panel extends Component { onClear: PropTypes.func, use12Hours: PropTypes.bool, addon: PropTypes.func, + focusOnOpen: PropTypes.bool, }; static defaultProps = { @@ -89,7 +90,7 @@ class Panel extends Component { const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, - format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, + format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen, } = this.props; const { value, currentSelectPanel, @@ -122,6 +123,7 @@ class Panel extends Component { onChange={this.onChange} onClear={onClear} allowEmpty={allowEmpty} + focusOnOpen={focusOnOpen} /> ); } -- cgit v1.2.3 From 1c72daf036bee06cde97639ac80b741c3ed38fa8 Mon Sep 17 00:00:00 2001 From: Levi Lansing Date: Thu, 28 Sep 2017 10:15:29 -0400 Subject: select text when focusing time input --- src/Header.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Header.jsx b/src/Header.jsx index 9e80a9c..6bed557 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -38,7 +38,10 @@ class Header extends Component { 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()); + requestAnimationFrame(() => { + this.refs.input.focus(); + this.refs.input.select(); + }); } } -- cgit v1.2.3 From bcb307b79a2481bad496085b75b701bf864adc6d Mon Sep 17 00:00:00 2001 From: Levi Lansing Date: Thu, 28 Sep 2017 11:44:03 -0400 Subject: add test that covers focus on open code --- tests/Header.spec.jsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx index 5ab0ba0..4b27abb 100644 --- a/tests/Header.spec.jsx +++ b/tests/Header.spec.jsx @@ -368,5 +368,33 @@ describe('Header', () => { 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(); + }); + }); }); }); -- cgit v1.2.3