diff --git a/src/combobox.js b/src/combobox.js index 236b406..4cec520 100644 --- a/src/combobox.js +++ b/src/combobox.js @@ -11,8 +11,28 @@ var input = React.createFactory('input'); module.exports = React.createClass({ propTypes: { + /** + * Called when the combobox's input receives focus and the user begins interacting with it. + * + * Signature: + * + * ```js + * function(userInput){} + * ``` + */ onFocus: React.PropTypes.func, + /** + * Called when the combobox's input loses focus after being activated for user input + * + * Signature: + * + * ```js + * function(userInput){} + * ``` + */ + onBlur: React.PropTypes.func, + /** * Called when the combobox receives user input, this is your chance to * filter the data and rerender the options. @@ -47,6 +67,7 @@ module.exports = React.createClass({ return { autocomplete: 'both', onFocus: k, + onBlur: k, onInput: k, onSelect: k, value: null, @@ -187,6 +208,7 @@ module.exports = React.createClass({ return; this.maybeSelectAutocompletedOption(); this.hideList(); + this.props.onBlur(); }, handleOptionBlur: function() { diff --git a/src/main.js b/src/main.js index 1e19cb3..99f82b2 100644 --- a/src/main.js +++ b/src/main.js @@ -11,6 +11,7 @@ module.exports = React.createClass({ isLoading: React.PropTypes.bool, loadingComponent: React.PropTypes.any, onFocus: React.PropTypes.func, + onBlur: React.PropTypes.func, onInput: React.PropTypes.func.isRequired, onSelect: React.PropTypes.func.isRequired, tokenAriaFunc: React.PropTypes.func, @@ -38,6 +39,12 @@ module.exports = React.createClass({ } }, + handleBlur: function() { + if (this.props.onBlur) { + this.props.onBlur(); + } + }, + handleInput: function(inputValue) { this.props.onInput(inputValue); }, @@ -87,6 +94,7 @@ module.exports = React.createClass({ 'aria-label': this.props['combobox-aria-label'], ariaDisabled: isDisabled, onFocus: this.handleFocus, + onBlur: this.handleBlur, onInput: this.handleInput, showListOnFocus: this.props.showListOnFocus, onSelect: this.handleSelect,