Expose select to async creatable

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() {

src/AsyncCreatable.js

@@ -7,23 +7,42 @@ const AsyncCreatable = React.createClass({
 	render () {
 		return (
 			<Select.Async {...this.props}>
-				{(asyncProps) => (
-					<Select.Creatable {...this.props}>
-						{(creatableProps) => (
-							<Select
-								{...asyncProps}
-								{...creatableProps}
-								onInputChange={(input) => {
-									creatableProps.onInputChange(input);
-									return asyncProps.onInputChange(input);
-								}}
-							/>
-						)}
-					</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;

src/Creatable.js

@@ -154,9 +154,19 @@ 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;
+		return this.props.onInputChange && this.props.onInputChange(input);
 	},
 
 	onInputKeyDown (event) {