Add showSuggestionsWhenValueIsSet prop, used to control autocomplete filter behaviour when multiple=false
parent
a4810d8e73
commit
5dfee66632
|
@ -22,6 +22,7 @@ class Autocomplete extends React.Component {
|
||||||
multiple: React.PropTypes.bool,
|
multiple: React.PropTypes.bool,
|
||||||
onChange: React.PropTypes.func,
|
onChange: React.PropTypes.func,
|
||||||
selectedPosition: React.PropTypes.oneOf(['above', 'below']),
|
selectedPosition: React.PropTypes.oneOf(['above', 'below']),
|
||||||
|
showSuggestionsWhenValueIsSet: React.PropTypes.bool,
|
||||||
source: React.PropTypes.any,
|
source: React.PropTypes.any,
|
||||||
value: React.PropTypes.any
|
value: React.PropTypes.any
|
||||||
};
|
};
|
||||||
|
@ -31,13 +32,14 @@ class Autocomplete extends React.Component {
|
||||||
direction: 'auto',
|
direction: 'auto',
|
||||||
selectedPosition: 'above',
|
selectedPosition: 'above',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
|
showSuggestionsWhenValueIsSet: false,
|
||||||
source: {}
|
source: {}
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
direction: this.props.direction,
|
direction: this.props.direction,
|
||||||
focus: false,
|
focus: false,
|
||||||
showAllSuggestions: true,
|
showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
|
||||||
query: this.query(this.props.value)
|
query: this.query(this.props.value)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -63,7 +65,7 @@ class Autocomplete extends React.Component {
|
||||||
const query = this.query(key);
|
const query = this.query(key);
|
||||||
if (this.props.onChange) this.props.onChange(key, event);
|
if (this.props.onChange) this.props.onChange(key, event);
|
||||||
this.setState(
|
this.setState(
|
||||||
{focus: false, query, showAllSuggestions: true},
|
{focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
|
||||||
() => { this.refs.input.blur(); }
|
() => { this.refs.input.blur(); }
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -50,6 +50,7 @@ class AutocompleteTest extends React.Component {
|
||||||
| `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.|
|
||||||
| `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` or `below`. |
|
| `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. |
|
||||||
| `value` | `String` or `Array` | | Value or array of values currently selected component.|
|
| `value` | `String` or `Array` | | Value or array of values currently selected component.|
|
||||||
|
|
||||||
Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
|
Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
|
||||||
|
|
|
@ -171,6 +171,11 @@ declare namespace __RT {
|
||||||
* Object of key/values or array representing all items suggested.
|
* Object of key/values or array representing all items suggested.
|
||||||
*/
|
*/
|
||||||
source: Object | Array<any>,
|
source: Object | Array<any>,
|
||||||
|
/**
|
||||||
|
* If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
showSuggestionsWhenValueIsSet?: boolean,
|
||||||
/**
|
/**
|
||||||
* Type of the input element. It can be a valid HTML5 input type
|
* Type of the input element. It can be a valid HTML5 input type
|
||||||
* @default text
|
* @default text
|
||||||
|
|
|
@ -38,6 +38,7 @@ class AutocompleteTest extends React.Component {
|
||||||
onChange={this.handleSimpleChange}
|
onChange={this.handleSimpleChange}
|
||||||
source={countriesArray}
|
source={countriesArray}
|
||||||
value={this.state.simple}
|
value={this.state.simple}
|
||||||
|
showSuggestionsWhenValueIsSet
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue