Merge branch 'master' into picker-step

7 files changed, 57 insertions, 6 deletions

diff --git a/README.md b/README.md
index 26e05fc..27a1aae 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ API
 | hourStep                | Number                            | 1 | interval between hours in picker  |
 | minuteStep              | Number                            | 1 | interval between minutes in picker  |
 | secondStep              | Number                            | 1 | interval between seconds in picker  |
+| focusOnOpen             | Boolean                           | false | automatically focus the input when the picker opens |
 
 ## Test Case
 
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 {
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 (
       <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>
     );
   }
diff --git a/src/Header.jsx b/src/Header.jsx
index f6dd241..1520d25 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,
     onKeyDown: PropTypes.func,
   };
 
@@ -34,6 +35,17 @@ 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();
+        this.refs.input.select();
+      });
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     const { value, format } = nextProps;
     this.setState({
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 4e09b57..a1b7c77 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -43,6 +43,7 @@ class Panel extends Component {
     minuteStep: PropTypes.number,
     secondStep: PropTypes.number,
     addon: PropTypes.func,
+    focusOnOpen: PropTypes.bool,
     onKeyDown: PropTypes.func,
   };
 
@@ -94,8 +95,8 @@ class Panel extends Component {
     const {
       prefixCls, className, placeholder, disabledHours, disabledMinutes,
       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
-      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, onKeyDown,
-      hourStep, minuteStep, secondStep,
+      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
+      focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
     } = this.props;
     const {
       value, currentSelectPanel,
@@ -134,6 +135,7 @@ class Panel extends Component {
           onChange={this.onChange}
           onClear={onClear}
           allowEmpty={allowEmpty}
+          focusOnOpen={focusOnOpen}
           onKeyDown={onKeyDown}
         />
         <Combobox
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 5f2239a..c7ff80a 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -51,6 +51,7 @@ export default class Picker extends Component {
     hourStep: PropTypes.number,
     minuteStep: PropTypes.number,
     secondStep: PropTypes.number,
+    focusOnOpen: PropTypes.bool,
     onKeyDown: PropTypes.func,
   };
 
@@ -79,6 +80,7 @@ export default class Picker extends Component {
     onBlur: noop,
     addon: noop,
     use12Hours: false,
+    focusOnOpen: false,
     onKeyDown: noop,
   };
 
@@ -166,7 +168,7 @@ export default class Picker extends Component {
       prefixCls, placeholder, disabledHours,
       disabledMinutes, disabledSeconds, hideDisabledOptions,
       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
-      addon, use12Hours, onKeyDown, hourStep, minuteStep, secondStep,
+      addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
     } = this.props;
     return (
       <Panel
@@ -193,6 +195,7 @@ export default class Picker extends Component {
         minuteStep={minuteStep}
         secondStep={secondStep}
         addon={addon}
+        focusOnOpen={focusOnOpen}
         onKeyDown={onKeyDown}
       />
     );
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();
+      });
+    });
   });
 });