vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add onBlur and onFocus props in Autocomplete component

old
Nathan Ducrey 2016-09-14 10:25:38 +02:00
parent 4d0b37e207
commit 9edc8bd32d
2 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/autocomplete/Autocomplete.js
View File

@ -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) => {

2
components/autocomplete/readme.md
View File

@ -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. |