From a7782b34abdc9d2beb8c604ee605fb1e81db8bd2 Mon Sep 17 00:00:00 2001
From: Daniel Heath <daniel@heath.cc>
Date: Tue, 4 Oct 2016 13:15:23 +1100
Subject: [PATCH] Clear Async options after making a selection

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).
---
 src/Async.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Async.js b/src/Async.js
index f8e354b6e9..37c4f50776 100644
--- a/src/Async.js
+++ b/src/Async.js
@@ -72,6 +72,10 @@ export default class Async extends Component {
 		});
 	}
 
+	clearOptions() {
+		this.setState({ options: [] });
+	}
+
 	loadOptions (inputValue) {
 		const { cache, loadOptions } = this.props;
 
@@ -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({