diff --git a/components/autocomplete/Autocomplete.d.ts b/components/autocomplete/Autocomplete.d.ts index b7d98d82..9eddafa1 100644 --- a/components/autocomplete/Autocomplete.d.ts +++ b/components/autocomplete/Autocomplete.d.ts @@ -88,6 +88,14 @@ export interface AutocompleteProps extends InputProps { * Callback function that is fired when component is focused. */ onFocus?: Function; + /** + * Callback function that is fired when a key is pressed down. + */ + onKeyDown?: Function; + /** + * Callback function that is fired when a key is lifted up. + */ + onKeyUp?: Function; /** * Callback function that is fired when the components's query value changes. */ diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js index 099a0337..ff552d35 100644 --- a/components/autocomplete/Autocomplete.js +++ b/components/autocomplete/Autocomplete.js @@ -35,6 +35,8 @@ const factory = (Chip, Input) => { onBlur: PropTypes.func, onChange: PropTypes.func, onFocus: PropTypes.func, + onKeyDown: PropTypes.func, + onKeyUp: PropTypes.func, onQueryChange: PropTypes.func, query: PropTypes.string, selectedPosition: PropTypes.oneOf(['above', 'below', 'none']), @@ -148,6 +150,8 @@ const factory = (Chip, Input) => { if (event.which === 13) { this.selectOrCreateActiveItem(event); } + + if(this.props.onKeyDown) this.props.onKeyDown(event); }; handleQueryKeyUp = (event) => { @@ -160,6 +164,8 @@ const factory = (Chip, Input) => { if (index >= suggestionsKeys.length) index = 0; this.setState({ active: suggestionsKeys[index] }); } + + if(this.props.onKeyUp) this.props.onKeyUp(event); }; handleSuggestionHover = (event) => { diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md index 9b2e925e..cf87d226 100644 --- a/components/autocomplete/readme.md +++ b/components/autocomplete/readme.md @@ -53,8 +53,10 @@ If you want to provide a theme via context, the component key is `RTAutocomplete | `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. | -| `onQueryChange` | `Function` | | Callback function that is fired when the components's query input value changes. | | `onFocus` | `Function` | | Callback function that is fired when component is focused. | +| `onKeyDown` | `Function` | | Callback function that is fired when a key is pressed down. | +| `onKeyUp` | `Function` | | Callback function that is fired when a key is lifted up. | +| `onQueryChange` | `Function` | | Callback function that is fired when the components's query input value changes. | | `query` | `String` | | This property has to be used in case the `source` is not static and will be changing during search for `multiple={false}` autocomplete, content of the `query` has to be managed by the `onQueryChange` callback. | | `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`, `below` or `none`. |