Change autocomplete filter behaviour when multiple=false
Adds a showAllSuggestions state, which is set to true initially. It is set to false when the input is changed, and is used to control if the shown suggestions should be filtered based when the multiple prop is false. Once a value is set, the state will be reset to true.old
parent
5d39761581
commit
a4810d8e73
|
@ -37,6 +37,7 @@ class Autocomplete extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
direction: this.props.direction,
|
direction: this.props.direction,
|
||||||
focus: false,
|
focus: false,
|
||||||
|
showAllSuggestions: true,
|
||||||
query: this.query(this.props.value)
|
query: this.query(this.props.value)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -61,7 +62,10 @@ class Autocomplete extends React.Component {
|
||||||
const key = this.props.multiple ? keys : keys[0];
|
const key = this.props.multiple ? keys : keys[0];
|
||||||
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({ focus: false, query }, () => { this.refs.input.blur(); });
|
this.setState(
|
||||||
|
{focus: false, query, showAllSuggestions: true},
|
||||||
|
() => { this.refs.input.blur(); }
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleQueryBlur = () => {
|
handleQueryBlur = () => {
|
||||||
|
@ -69,7 +73,7 @@ class Autocomplete extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleQueryChange = (value) => {
|
handleQueryChange = (value) => {
|
||||||
this.setState({query: value});
|
this.setState({query: value, showAllSuggestions: false});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleQueryFocus = () => {
|
handleQueryFocus = () => {
|
||||||
|
@ -113,8 +117,11 @@ class Autocomplete extends React.Component {
|
||||||
const query = this.state.query.toLowerCase().trim() || '';
|
const query = this.state.query.toLowerCase().trim() || '';
|
||||||
const values = this.values();
|
const values = this.values();
|
||||||
for (const [key, value] of this.source()) {
|
for (const [key, value] of this.source()) {
|
||||||
if (value.toLowerCase().trim().startsWith(query)
|
const valueMatchesQuery = value.toLowerCase().trim().startsWith(query);
|
||||||
&& (!values.has(key) || !this.props.multiple)) {
|
if (
|
||||||
|
(valueMatchesQuery && !values.has(key))
|
||||||
|
|| (!this.props.multiple && (this.state.showAllSuggestions || valueMatchesQuery))
|
||||||
|
) {
|
||||||
suggest.set(key, value);
|
suggest.set(key, value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue