Add onFocus property (#40)

* fix tests

* make this required, because it is

* add onFocus prop

react doesn't yet support focusin (facebook/react#6410),
so add a prop so we can know when something in this component has focus

this is useful if you want to defer something until the user interacts with the
component (e.g. trigger ajax to pre-fill a store)

Author: jenseng

package.json

@@ -29,6 +29,7 @@
     "babel-preset-stage-1": "^6.5.0",
     "chai": "^1.10.0",
     "eslint": "^1.10.1",
+    "jsx-loader": "^0.13.2",
     "karma": "^0.13.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^0.2.1",

src/combobox.js

@@ -11,6 +11,8 @@ var input = React.createFactory('input');
 module.exports = React.createClass({
 
   propTypes: {
+    onFocus: React.PropTypes.func,
+
     /**
      * Called when the combobox receives user input, this is your chance to
      * filter the data and rerender the options.
@@ -44,6 +46,7 @@ module.exports = React.createClass({
   getDefaultProps: function() {
     return {
       autocomplete: 'both',
+      onFocus: k,
       onInput: k,
       onSelect: k,
       value: null,
@@ -164,6 +167,7 @@ module.exports = React.createClass({
   },
 
   handleInputFocus: function() {
+    this.props.onFocus();
     this.maybeShowList();
   },
 

src/main.js

@@ -10,7 +10,8 @@ module.exports = React.createClass({
   propTypes: {
     isLoading: React.PropTypes.bool,
     loadingComponent: React.PropTypes.any,
-    onInput: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
+    onInput: React.PropTypes.func.isRequired,
     onSelect: React.PropTypes.func.isRequired,
     tokenAriaFunc: React.PropTypes.func,
     onRemove: React.PropTypes.func.isRequired,
@@ -31,6 +32,12 @@ module.exports = React.createClass({
     this.refs['combo-li'].querySelector('input').focus();
   },
 
+  handleFocus: function() {
+    if (this.props.onFocus) {
+      this.props.onFocus();
+    }
+  },
+
   handleInput: function(inputValue) {
     this.props.onInput(inputValue);
   },
@@ -60,6 +67,7 @@ module.exports = React.createClass({
       return (
         Token({
           tokenAriaFunc: this.props.tokenAriaFunc,
+          onFocus: this.handleFocus,
           onRemove: this.handleRemove,
           value: token,
           name: token.name,
@@ -78,6 +86,7 @@ module.exports = React.createClass({
           id: this.props.id,
           'aria-label': this.props['combobox-aria-label'],
           ariaDisabled: isDisabled,
+          onFocus: this.handleFocus,
           onInput: this.handleInput,
           showListOnFocus: this.props.showListOnFocus,
           onSelect: this.handleSelect,

src/token.js

@@ -26,6 +26,7 @@ module.exports = React.createClass({
         span({
           role: 'button',
           onClick: this.handleClick,
+          onFocus: this.props.onFocus,
           onKeyDown: this.handleKeyDown,
           'aria-label': this.ariaLabelRemove(),
           className: "ic-token-delete-button",