Skip to content

Commit

Permalink
Clear Async options after making a selection
Browse files Browse the repository at this point in the history
Currently, when you make a selection from an async
dropdown, it keeps the list open but clears the input.

This looks inconsistent and doesn't match the common UX
for async search (looking up an item from a long list).
  • Loading branch information
DanielHeath committed Oct 11, 2016
1 parent cf0429b commit a7782b3
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion src/Async.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ export default class Async extends Component {
});
}

clearOptions() {
this.setState({ options: [] });
}

loadOptions (inputValue) {
const { cache, loadOptions } = this.props;

Expand Down Expand Up @@ -174,7 +178,13 @@ export default class Async extends Component {
noResultsText: this.noResultsText(),
placeholder: isLoading ? loadingPlaceholder : placeholder,
options: (isLoading && loadingPlaceholder) ? [] : options,
ref: (ref) => (this.select = ref)
ref: (ref) => (this.select = ref),
onChange: (newValues) => {
if (this.props.value && (newValues.length > this.props.value.length)) {
this.clearOptions();
}
this.props.onChange(newValues);
}
};

return children({
Expand Down

0 comments on commit a7782b3

Please sign in to comment.