From 69c5e9c57cb0cd8b77c17411977ff34b955948c2 Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Tue, 28 Mar 2017 16:05:28 -0600 Subject: [PATCH 1/3] fix tests --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 0d04ae7..662a484 100644 --- a/package.json +++ b/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", From 60c24dd3ac79bc0aa3a0e858bef053f85a5ee60b Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Tue, 28 Mar 2017 16:14:24 -0600 Subject: [PATCH 2/3] make this required, because it is --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 19f77d9..cc15b52 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,7 @@ module.exports = React.createClass({ propTypes: { isLoading: React.PropTypes.bool, loadingComponent: React.PropTypes.any, - onInput: React.PropTypes.func, + onInput: React.PropTypes.func.isRequired, onSelect: React.PropTypes.func.isRequired, tokenAriaFunc: React.PropTypes.func, onRemove: React.PropTypes.func.isRequired, From 0b354edd16f6d7f6f86e465933e78dcbdaec19fa Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Tue, 28 Mar 2017 16:21:57 -0600 Subject: [PATCH 3/3] add onFocus prop react doesn't yet support focusin (https://github.com/facebook/react/issues/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) --- src/combobox.js | 4 ++++ src/main.js | 9 +++++++++ src/token.js | 1 + 3 files changed, 14 insertions(+) diff --git a/src/combobox.js b/src/combobox.js index 65c653a..b598d34 100644 --- a/src/combobox.js +++ b/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(); }, diff --git a/src/main.js b/src/main.js index cc15b52..1e19cb3 100644 --- a/src/main.js +++ b/src/main.js @@ -10,6 +10,7 @@ module.exports = React.createClass({ propTypes: { isLoading: React.PropTypes.bool, loadingComponent: React.PropTypes.any, + onFocus: React.PropTypes.func, onInput: React.PropTypes.func.isRequired, onSelect: React.PropTypes.func.isRequired, tokenAriaFunc: React.PropTypes.func, @@ -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, diff --git a/src/token.js b/src/token.js index d94abd2..b77f186 100644 --- a/src/token.js +++ b/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",