diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js index 8002715b..fae68208 100644 --- a/components/autocomplete/Autocomplete.js +++ b/components/autocomplete/Autocomplete.js @@ -23,7 +23,9 @@ const factory = (Chip, Input) => { error: PropTypes.string, label: PropTypes.string, multiple: PropTypes.bool, + onBlur: PropTypes.func, onChange: PropTypes.func, + onFocus: PropTypes.func, selectedPosition: PropTypes.oneOf(['above', 'below']), showSuggestionsWhenValueIsSet: PropTypes.bool, source: PropTypes.any, @@ -91,6 +93,7 @@ const factory = (Chip, Input) => { handleQueryBlur = () => { if (this.state.focus) this.setState({focus: false}); + if (this.props.onBlur) this.props.onBlur(); }; handleQueryChange = (value) => { @@ -100,6 +103,7 @@ const factory = (Chip, Input) => { handleQueryFocus = () => { this.refs.suggestions.scrollTop = 0; this.setState({active: '', focus: true}); + if (this.props.onFocus) this.props.onFocus(); }; handleQueryKeyDown = (event) => { diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md index e6f1dfc9..79b2fdee 100644 --- a/components/autocomplete/readme.md +++ b/components/autocomplete/readme.md @@ -50,7 +50,9 @@ If you want to provide a theme via context, the component key is `RTAutocomplete | `error` | `String` | | Sets the error string for the internal input element.| | `label` | `String` | | The text string to use for the floating label element.| | `multiple` | `Bool` | `true` | If true, component can hold multiple values.| +| `onBlur` | `Function` | | Callback function that is fired when component is blurred.| | `onChange` | `Function` | | Callback function that is fired when the components's value changes.| +| `onFocus` | `Function` | | Callback function that is fired when component is focused.| | `source` | `Object` or `Array` | | Object of key/values or array representing all items suggested. | | `selectedPosition` | `String` | `above` | Determines if the selected list is shown above or below input. It can be `above` or `below`. | | `showSuggestionsWhenValueIsSet` | `Bool` | `false` | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |