Merge pull request #1780 from clurdish/dev
Enable onKeyDown and onKeyUp props on Autocomplete componentold
commit
30d6c4a766
|
@ -88,6 +88,14 @@ export interface AutocompleteProps extends InputProps {
|
||||||
* Callback function that is fired when component is focused.
|
* Callback function that is fired when component is focused.
|
||||||
*/
|
*/
|
||||||
onFocus?: Function;
|
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.
|
* Callback function that is fired when the components's query value changes.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -35,6 +35,8 @@ const factory = (Chip, Input) => {
|
||||||
onBlur: PropTypes.func,
|
onBlur: PropTypes.func,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
onFocus: PropTypes.func,
|
onFocus: PropTypes.func,
|
||||||
|
onKeyDown: PropTypes.func,
|
||||||
|
onKeyUp: PropTypes.func,
|
||||||
onQueryChange: PropTypes.func,
|
onQueryChange: PropTypes.func,
|
||||||
query: PropTypes.string,
|
query: PropTypes.string,
|
||||||
selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
|
selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
|
||||||
|
@ -148,6 +150,8 @@ const factory = (Chip, Input) => {
|
||||||
if (event.which === 13) {
|
if (event.which === 13) {
|
||||||
this.selectOrCreateActiveItem(event);
|
this.selectOrCreateActiveItem(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(this.props.onKeyDown) this.props.onKeyDown(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleQueryKeyUp = (event) => {
|
handleQueryKeyUp = (event) => {
|
||||||
|
@ -160,6 +164,8 @@ const factory = (Chip, Input) => {
|
||||||
if (index >= suggestionsKeys.length) index = 0;
|
if (index >= suggestionsKeys.length) index = 0;
|
||||||
this.setState({ active: suggestionsKeys[index] });
|
this.setState({ active: suggestionsKeys[index] });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(this.props.onKeyUp) this.props.onKeyUp(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSuggestionHover = (event) => {
|
handleSuggestionHover = (event) => {
|
||||||
|
|
|
@ -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. |
|
| `multiple` | `Bool` | `true` | If true, component can hold multiple values. |
|
||||||
| `onBlur` | `Function` | | Callback function that is fired when component is blurred. |
|
| `onBlur` | `Function` | | Callback function that is fired when component is blurred. |
|
||||||
| `onChange` | `Function` | | Callback function that is fired when the components's value changes. |
|
| `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. |
|
| `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. |
|
| `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. |
|
| `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`. |
|
| `selectedPosition` | `String` | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |
|
||||||
|
|
Loading…
Reference in New Issue