add focusOnOpen option (#61)

diff --git a/README.md b/README.md
index a2758b9faec55ea530b2692da26b0a9ae0e38201..0698d7d407dc50b4620d5604a73e446d4fba2c52 100644 (file)
--- 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 8e4f5de7865410da4496fa707832abb4a9c28e6a..12d8a8d27580fe1e9a70e13109f696ce7cb15f00 100644 (file)
--- 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 91e8549e14664555290a905a8b0102cddd27f808..9e80a9ccd18e738161a44838767e166c35717352 100644 (file)
--- 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 1953ad497a0a69309251846e3c25980bd8b57741..deeba5207f6a023337a4c2e8d6827b0e3ef2fc0b 100644 (file)
--- 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}
         />
         <Combobox
           prefixCls={prefixCls}

diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 2c6a1f16ea69f5825fd7b7f30963ea308a3528ca..e01752732dbb7e9c8b0710f0f58dc5599f1aced5 100644 (file)
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -46,6 +46,7 @@ export default class Picker extends Component {
     name: PropTypes.string,
     autoComplete: PropTypes.string,
     use12Hours: PropTypes.bool,
+    focusOnOpen: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -71,6 +72,7 @@ export default class Picker extends Component {
     onClose: noop,
     addon: noop,
     use12Hours: false,
+    focusOnOpen: false,
   };
 
   constructor(props) {
@@ -157,7 +159,7 @@ export default class Picker extends Component {
       prefixCls, placeholder, disabledHours,
       disabledMinutes, disabledSeconds, hideDisabledOptions,
       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
-      addon, use12Hours,
+      addon, use12Hours, focusOnOpen,
     } = this.props;
     return (
       <Panel
@@ -181,6 +183,7 @@ export default class Picker extends Component {
         hideDisabledOptions={hideDisabledOptions}
         use12Hours={use12Hours}
         addon={addon}
+        focusOnOpen={focusOnOpen}
       />
     );
   }