From 5cf7886760a931739d996a0209f74400b53eb642 Mon Sep 17 00:00:00 2001
From: Daniel Heath <daniel@heath.cc>
Date: Tue, 8 Nov 2016 10:55:05 +1100
Subject: [PATCH 1/4] Refactor: Flatten loop over a single item

This abstraction might be justified if there were 3+
copies of the loop, but for a single item it's
added overhead + confusion to no benefit.
---
 src/Async.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/Async.js b/src/Async.js
index 17e949db0d..e748a9aa6e 100644
--- a/src/Async.js
+++ b/src/Async.js
@@ -67,14 +67,11 @@ export default class Async extends Component {
 	}
 
 	componentWillUpdate (nextProps, nextState) {
-		const propertiesToSync = ['options'];
-		propertiesToSync.forEach((prop) => {
-			if (this.props[prop] !== nextProps[prop]) {
-				this.setState({
-					[prop]: nextProps[prop]
-				});
-			}
-		});
+		if (this.props.options !== nextProps.options) {
+			this.setState({
+				options: nextProps.options
+			});
+		}
 	}
 
 	clearOptions() {

From 33ebaf70b8c3647b02f803cd1c3e6d474c7916a2 Mon Sep 17 00:00:00 2001
From: Daniel Heath <daniel@heath.cc>
Date: Tue, 8 Nov 2016 11:49:17 +1100
Subject: [PATCH 2/4] Creatable calls through to onInputChange prop if provided

Previously, if you provided an `onInputChange` prop to a
`Creatable` it would be silently discarded.

After this change you can use Creatable and also get an
event when the user types input.
---
 src/AsyncCreatable.js | 4 ----
 src/Creatable.js      | 1 +
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/AsyncCreatable.js b/src/AsyncCreatable.js
index 12b8ad540c..4bd3099b8b 100644
--- a/src/AsyncCreatable.js
+++ b/src/AsyncCreatable.js
@@ -13,10 +13,6 @@ const AsyncCreatable = React.createClass({
 							<Select
 								{...asyncProps}
 								{...creatableProps}
-								onInputChange={(input) => {
-									creatableProps.onInputChange(input);
-									return asyncProps.onInputChange(input);
-								}}
 							/>
 						)}
 					</Select.Creatable>
diff --git a/src/Creatable.js b/src/Creatable.js
index 9d2ec905c7..223b8f6b6a 100644
--- a/src/Creatable.js
+++ b/src/Creatable.js
@@ -157,6 +157,7 @@ const Creatable = React.createClass({
 	onInputChange (input) {
 		// This value may be needed in between Select mounts (when this.select is null)
 		this.inputValue = input;
+		return this.props.onInputChange && this.props.onInputChange(input)
 	},
 
 	onInputKeyDown (event) {

From d216b5668a8873b8583189fbf2d0a0d5d5e43917 Mon Sep 17 00:00:00 2001
From: Daniel Heath <daniel@heath.cc>
Date: Tue, 8 Nov 2016 11:50:51 +1100
Subject: [PATCH 3/4] Update inputValue when the options list changes

When deleting a multi select item, the input is cleared
but no change event is fired for the input box.

This patch detects changes to the options list and
updates `Creatable`'s cache of the input value.
---
 src/Creatable.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/Creatable.js b/src/Creatable.js
index 223b8f6b6a..59f44d571c 100644
--- a/src/Creatable.js
+++ b/src/Creatable.js
@@ -154,6 +154,15 @@ const Creatable = React.createClass({
 		});
 	},
 
+	componentWillUpdate (nextProps, nextState) {
+		// Tricky: Async clears the select inputValue when deleting
+		// an option, but it doesn't fire onInputChange which is
+		// how we normally keep inputValue in sync
+		if (this.props.options !== nextProps.options) {
+			this.inputValue = this.select.state.inputValue;
+		}
+	},
+
 	onInputChange (input) {
 		// This value may be needed in between Select mounts (when this.select is null)
 		this.inputValue = input;

From 1ddb8d9bf721c3dc806385229fd965f47f242c05 Mon Sep 17 00:00:00 2001
From: Daniel Heath <daniel@heath.cc>
Date: Tue, 8 Nov 2016 11:55:41 +1100
Subject: [PATCH 4/4] Pass through refs and props to all layers of
 AsyncCreatable.

This enables users of AsyncCreatable to hook the Select which is
created and/or access it as a ref.

Previously there was no way to get at the underlying Select if
you used AsyncCreatable.
---
 src/AsyncCreatable.js | 43 +++++++++++++++++++++++++++++++++----------
 src/Creatable.js      |  2 +-
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/AsyncCreatable.js b/src/AsyncCreatable.js
index 4bd3099b8b..d479b118d7 100644
--- a/src/AsyncCreatable.js
+++ b/src/AsyncCreatable.js
@@ -7,19 +7,42 @@ const AsyncCreatable = React.createClass({
 	render () {
 		return (
 			<Select.Async {...this.props}>
-				{(asyncProps) => (
-					<Select.Creatable {...this.props}>
-						{(creatableProps) => (
-							<Select
-								{...asyncProps}
-								{...creatableProps}
-							/>
-						)}
-					</Select.Creatable>
-				)}
+				{({ref, ...asyncProps}) => {
+					const asyncRef = ref;
+					return <Select.Creatable {...asyncProps} >
+						{({ref, ...creatableProps}) => {
+							const creatableRef = ref;
+							return this.props.children({
+								...creatableProps,
+								ref: (select) => {
+									creatableRef(select);
+									asyncRef(select);
+									this.select = select;
+								}
+							});
+						}}
+					</Select.Creatable>;
+				}}
 			</Select.Async>
 		);
 	}
 });
 
+function defaultChildren (props) {
+	return (
+		<Select {...props} />
+	);
+};
+
+const propTypes = {
+	children: React.PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
+};
+
+const defaultProps = {
+	children: defaultChildren,
+};
+
+AsyncCreatable.propTypes = propTypes;
+AsyncCreatable.defaultProps = defaultProps;
+
 module.exports = AsyncCreatable;
diff --git a/src/Creatable.js b/src/Creatable.js
index 59f44d571c..83a11186be 100644
--- a/src/Creatable.js
+++ b/src/Creatable.js
@@ -166,7 +166,7 @@ const Creatable = React.createClass({
 	onInputChange (input) {
 		// This value may be needed in between Select mounts (when this.select is null)
 		this.inputValue = input;
-		return this.props.onInputChange && this.props.onInputChange(input)
+		return this.props.onInputChange && this.props.onInputChange(input);
 	},
 
 	onInputKeyDown (event) {