From ed8d087d4d5d1c46b0b1f7a11c71eb3949be5dd1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 17 Sep 2016 23:03:02 -0700
Subject: [PATCH 1/7] Refactored Async. Cache not yet implemented. Pushing for
 discussion

---
 CHANGES.md                             |   1 -
 README.md                              |   1 -
 examples/src/components/GithubUsers.js |   6 +-
 src/Async.js                           | 264 ++++-----
 src/AsyncCreatable.js                  |   4 -
 test/Async-test.js                     | 768 ++++++-------------------
 6 files changed, 309 insertions(+), 735 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index fb04ed4672..451b929481 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -19,7 +19,6 @@ Multiple values are now submitted in multiple form fields, which results in an a
 ## New Select.Async Component
 
 `loadingPlaceholder` prop
-`autoload` changed to `minimumInput` and now controls the minimum input to load options
 `cacheAsyncResults` -> `cache` (new external cache support) - defaults to true
 
 ## Fixes & Other Changes
diff --git a/README.md b/README.md
index b86a3f0a6f..532bf58cac 100644
--- a/README.md
+++ b/README.md
@@ -383,7 +383,6 @@ function onInputKeyDown(event) {
 	placeholder 	|	string\|node	|	'Select ...'	|	field placeholder, displayed when there's no value
 	scrollMenuIntoView |	bool	|	true		|	whether the viewport will shift to display the entire menu when engaged
 	searchable 	|	bool	|	true		|	whether to enable searching feature or not
-	searchingText	|	string	|	'Searching...'	|	message to display whilst options are loading via asyncOptions, or when `isLoading` is true
 	searchPromptText |	string\|node	|	'Type to search'	|	label to prompt for search input
 	tabSelectsValue	|	bool	|	true	|	whether to select the currently focused value when the `[tab]` key is pressed
 	value 		|	any	|	undefined	|	initial field value
diff --git a/examples/src/components/GithubUsers.js b/examples/src/components/GithubUsers.js
index 378792d9f2..582c131340 100644
--- a/examples/src/components/GithubUsers.js
+++ b/examples/src/components/GithubUsers.js
@@ -31,6 +31,10 @@ const GithubUsers = React.createClass({
 		});
 	},
 	getUsers (input) {
+		if (!input) {
+			return Promise.resolve({ options: [] });
+		}
+
 		return fetch(`https://api.github.com/search/users?q=${input}`)
       .then((response) => response.json())
       .then((json) => {
@@ -53,7 +57,7 @@ const GithubUsers = React.createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<AsyncComponent multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" loadOptions={this.getUsers} minimumInput={1} backspaceRemoves={false} />
+				<AsyncComponent multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" loadOptions={this.getUsers} backspaceRemoves={false} />
 				<div className="checkbox-list">
 					<label className="checkbox">
 						<input type="radio" className="checkbox-control" checked={this.state.multi} onChange={this.switchToMulti}/>
diff --git a/src/Async.js b/src/Async.js
index f14b8e42c4..5886f9ba56 100644
--- a/src/Async.js
+++ b/src/Async.js
@@ -1,181 +1,145 @@
-import React from 'react';
-
+import React, { Component, PropTypes } from 'react';
 import Select from './Select';
 import stripDiacritics from './utils/stripDiacritics';
 
-let requestId = 0;
+// @TODO Implement cache
+
+const propTypes = {
+	autoload: React.PropTypes.bool.isRequired,
+	children: React.PropTypes.func.isRequired,			// Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
+	ignoreAccents: React.PropTypes.bool,             // whether to strip diacritics when filtering (shared with Select)
+	ignoreCase: React.PropTypes.bool,                // whether to perform case-insensitive filtering (shared with Select)
+	loadingPlaceholder: PropTypes.string.isRequired,
+	loadOptions: React.PropTypes.func.isRequired,
+	options: PropTypes.array.isRequired,
+	placeholder: React.PropTypes.oneOfType([
+		React.PropTypes.string,
+		React.PropTypes.node
+	]),
+	searchPromptText: React.PropTypes.oneOfType([
+		React.PropTypes.string,
+		React.PropTypes.node
+	]),
+};
 
-function initCache (cache) {
-	if (cache && typeof cache !== 'object') {
-		cache = {};
+const defaultProps = {
+	autoload: true,
+	children: defaultChildren,
+	ignoreAccents: true,
+	ignoreCase: true,
+	loadingPlaceholder: 'Loading...',
+	options: [],
+	searchPromptText: 'Type to search',
+};
+
+export default class Async extends Component {
+	constructor (props, context) {
+		super(props, context);
+
+		this.state = {
+			isLoading: false,
+			options: props.options,
+		};
+
+		this._onInputChange = this._onInputChange.bind(this);
 	}
-	return cache ? cache : null;
-}
 
-function updateCache (cache, input, data) {
-	if (!cache) return;
-	cache[input] = data;
-}
+	componentDidMount () {
+		const { autoload } = this.props;
 
-function getFromCache (cache, input) {
-	if (!cache) return;
-	for (let i = input.length; i >= 0; --i) {
-		let cacheKey = input.slice(0, i);
-		if (cache[cacheKey] && (input === cacheKey || cache[cacheKey].complete)) {
-			return cache[cacheKey];
+		if (autoload) {
+			this.loadOptions('');
 		}
 	}
-}
 
-function thenPromise (promise, callback) {
-	if (!promise || typeof promise.then !== 'function') return;
-	return promise.then((data) => {
-		callback(null, data);
-	}, (err) => {
-		callback(err);
-	});
-}
+	componentWillUpdate (nextProps, nextState) {
+		const propertiesToSync = ['options'];
+		propertiesToSync.forEach((prop) => {
+			if (this.props[prop] !== nextProps[prop]) {
+				this.setState({
+					[prop]: nextProps[prop]
+				});
+			}
+		});
+	}
 
-const stringOrNode = React.PropTypes.oneOfType([
-	React.PropTypes.string,
-	React.PropTypes.node
-]);
-
-const Async = React.createClass({
-	propTypes: {
-		cache: React.PropTypes.any,                     // object to use to cache results, can be null to disable cache
-		children: React.PropTypes.func,									// Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
-		ignoreAccents: React.PropTypes.bool,            // whether to strip diacritics when filtering (shared with Select)
-		ignoreCase: React.PropTypes.bool,               // whether to perform case-insensitive filtering (shared with Select)
-		isLoading: React.PropTypes.bool,                // overrides the isLoading state when set to true
-		loadOptions: React.PropTypes.func.isRequired,   // function to call to load options asynchronously
-		loadingPlaceholder: React.PropTypes.string,     // replaces the placeholder while options are loading
-		minimumInput: React.PropTypes.number,           // the minimum number of characters that trigger loadOptions
-		noResultsText: stringOrNode,                    // placeholder displayed when there are no matching search results (shared with Select)
-		onInputChange: React.PropTypes.func,            // onInputChange handler: function (inputValue) {}
-		placeholder: stringOrNode,                      // field placeholder, displayed when there's no value (shared with Select)
-		searchPromptText: stringOrNode,   					    // label to prompt for search input
-		searchingText: React.PropTypes.string,          // message to display while options are loading
-	},
-	getDefaultProps () {
-		return {
-			cache: true,
-			ignoreAccents: true,
-			ignoreCase: true,
-			loadingPlaceholder: 'Loading...',
-			minimumInput: 0,
-			searchingText: 'Searching...',
-			searchPromptText: 'Type to search',
-		};
-	},
-	getInitialState () {
-		return {
-			cache: initCache(this.props.cache),
-			isLoading: false,
-			options: [],
+	loadOptions (inputValue) {
+		const { loadOptions } = this.props;
+
+		const callback = (error, data) => {
+			if (callback === this._callback) {
+				this._callback = null;
+
+				const options = data && data.options || [];
+
+				this.setState({
+					isLoading: false,
+					options
+				});
+			}
 		};
-	},
-	componentWillMount () {
-		this._lastInput = '';
-	},
-	componentDidMount () {
-		this.loadOptions('');
-	},
-	componentWillReceiveProps (nextProps) {
-		if (nextProps.cache !== this.props.cache) {
-			this.setState({
-				cache: initCache(nextProps.cache),
-			});
+
+		// Ignore all but the most recent request
+		this._callback = callback;
+
+		const promise = loadOptions(inputValue, callback);
+		if (promise) {
+			promise.then(
+				(data) => callback(null, data),
+				(error) => callback(error)
+			);
 		}
-	},
-	focus () {
-		this.select.focus();
-	},
-	resetState () {
-		this._currentRequestId = -1;
-		this.setState({
-			isLoading: false,
-			options: [],
-		});
-	},
-	getResponseHandler (input) {
-		let _requestId = this._currentRequestId = requestId++;
-		return (err, data) => {
-			if (err) throw err;
-			if (!this.isMounted()) return;
-			updateCache(this.state.cache, input, data);
-			if (_requestId !== this._currentRequestId) return;
+
+		if (
+			this._callback &&
+			!this.state.isLoading
+		) {
 			this.setState({
-				isLoading: false,
-				options: data && data.options || [],
+				isLoading: true
 			});
-		};
-	},
-	loadOptions (input) {
-		if (this.props.onInputChange) {
-			let nextState = this.props.onInputChange(input);
-			// Note: != used deliberately here to catch undefined and null
-			if (nextState != null) {
-				input = '' + nextState;
-			}
 		}
-		if (this.props.ignoreAccents) input = stripDiacritics(input);
-		if (this.props.ignoreCase) input = input.toLowerCase();
 
-		this._lastInput = input;
-		if (input.length < this.props.minimumInput) {
-			return this.resetState();
+		return inputValue;
+	}
+
+	_onInputChange (inputValue) {
+		const { ignoreAccents, ignoreCase } = this.props;
+
+		if (ignoreAccents) {
+			inputValue = stripDiacritics(inputValue);
 		}
-		let cacheResult = getFromCache(this.state.cache, input);
-		if (cacheResult && Array.isArray(cacheResult.options)) {
-			return this.setState({
-				options: cacheResult.options,
-			});
+
+		if (ignoreCase) {
+			inputValue = inputValue.toLowerCase();
 		}
-		this.setState({
-			isLoading: true,
-		});
-		let responseHandler = this.getResponseHandler(input);
-		let inputPromise = thenPromise(this.props.loadOptions(input, responseHandler), responseHandler);
-		return inputPromise ? inputPromise.then(() => {
-			return input;
-		}) : input;
-	},
+
+		return this.loadOptions(inputValue);
+	}
+
 	render () {
-		let {
-			children = defaultChildren,
-			noResultsText,
-			...restProps
-		} = this.props;
-		let { isLoading, options } = this.state;
-		if (this.props.isLoading) isLoading = true;
-		let placeholder = isLoading ? this.props.loadingPlaceholder : this.props.placeholder;
-		if (isLoading) {
-			noResultsText = this.props.searchingText;
-		} else if (!options.length && this._lastInput.length < this.props.minimumInput) {
-			noResultsText = this.props.searchPromptText;
-		}
+		const { children, loadingPlaceholder, placeholder, searchPromptText } = this.props;
+		const { isLoading, options } = this.state;
 
 		const props = {
-			...restProps,
-			isLoading,
-			noResultsText,
-			onInputChange: this.loadOptions,
-			options,
-			placeholder,
-			ref: (ref) => {
-				this.select = ref;
-			}
+			noResultsText: isLoading ? loadingPlaceholder : searchPromptText,
+			placeholder: isLoading ? loadingPlaceholder : placeholder,
+			options: isLoading ? [] : options
 		};
 
-		return children(props);
+		return children({
+			...this.props,
+			...props,
+			isLoading,
+			onInputChange: this._onInputChange
+		});
 	}
-});
+}
+
+Async.propTypes = propTypes;
+Async.defaultProps = defaultProps;
 
 function defaultChildren (props) {
 	return (
 		<Select {...props} />
 	);
 };
-
-module.exports = Async;
diff --git a/src/AsyncCreatable.js b/src/AsyncCreatable.js
index eeea144982..12b8ad540c 100644
--- a/src/AsyncCreatable.js
+++ b/src/AsyncCreatable.js
@@ -17,10 +17,6 @@ const AsyncCreatable = React.createClass({
 									creatableProps.onInputChange(input);
 									return asyncProps.onInputChange(input);
 								}}
-								ref={(ref) => {
-									creatableProps.ref(ref);
-									asyncProps.ref(ref);
-								}}
 							/>
 						)}
 					</Select.Creatable>
diff --git a/test/Async-test.js b/test/Async-test.js
index 431c45b75c..05ff08699a 100644
--- a/test/Async-test.js
+++ b/test/Async-test.js
@@ -11,593 +11,205 @@ var unexpected = require('unexpected');
 var unexpectedReact = require('unexpected-react');
 var unexpectedSinon = require('unexpected-sinon');
 var expect = unexpected
-	.clone()
-	.installPlugin(unexpectedReact)
-	.installPlugin(unexpectedSinon);
+  .clone()
+  .installPlugin(unexpectedReact)
+  .installPlugin(unexpectedSinon);
 
 var React = require('react');
 var ReactDOM = require('react-dom');
 var TestUtils = require('react-addons-test-utils');
 var sinon = require('sinon');
 
-
 var Select = require('../src/Select');
 
 describe('Async', () => {
-
-	var renderer;
-	var loadOptions;
-
-	const typeSearchText = function(text) {
-		const output = renderer.getRenderOutput();
-		// onInputChange is actually bound to loadOptions(...),
-		// loadOptions returns the promise, if there is one, so we can use this
-		// to chain the assertions onto
-		return output.props.onInputChange(text);
-	};
-
-	beforeEach(() => {
-
-		renderer = TestUtils.createRenderer();
-		loadOptions = sinon.stub();
-	});
-
-	describe('using promises', () => {
-
-
-		beforeEach(() => {
-
-			// Render an instance of the component
-			renderer.render(<Select.Async loadOptions={loadOptions} minimumInput={1}/>);
-		});
-
-
-		it('does not call loadOptions', () => {
-
-			expect(loadOptions, 'was not called');
-		});
-
-		it('renders the select with no options', () => {
-
-			return expect(renderer, 'to have rendered',
-				<Select options={ [] } noResultsText="Type to search"/>);
-		});
-
-		it('calls the loadOptions for each input', () => {
-
-			typeSearchText('te');
-			typeSearchText('tes');
-			typeSearchText('te');
-			return expect(loadOptions, 'was called times', 3);
-		});
-
-		it('shows "Loading..." after typing', () => {
-
-			typeSearchText('te');
-			return expect(renderer, 'to have rendered',
-				<Select
-					isLoading
-					placeholder="Loading..."
-					noResultsText="Searching..."
-				/>);
-		});
-
-		it('shows the returns options when the result returns', () => {
-
-			// Unexpected comes with promises built in - we'll use them
-			// rather than depending on another library
-			loadOptions.returns(expect.promise((resolve, reject) => {
-				resolve({ options: [{ value: 1, label: 'test' }] });
-			}));
-
-			typeSearchText('te');
-
-			return loadOptions.firstCall.returnValue.then(() => {
-
-				return expect(renderer, 'to have rendered',
-					<Select
-						isLoading={false}
-						placeholder="Select..."
-						noResultsText="No results found"
-						options={ [ { value: 1, label: 'test' } ] }
-					/>);
-			});
-		});
-
-		it('shows "Loading..." after typing if refined search matches none of the previous results', () => {
-
-			loadOptions.returns(expect.promise((resolve, reject) => {
-				resolve({ options: [{ value: 1, label: 'test' }] });
-			}));
-
-			typeSearchText('te');
-
-			return loadOptions.firstCall.returnValue.then(() => {
-
-				typeSearchText('ten');
-
-				return expect(renderer, 'to have rendered',
-					<Select
-						isLoading
-						placeholder="Loading..."
-						noResultsText="Searching..."
-					/>);
-			});
-		});
-
-		it('ignores the result of an earlier call, when the responses come in the wrong order', () => {
-
-			let promise1Resolve, promise2Resolve;
-			const promise1 = expect.promise((resolve, reject) => {
-				promise1Resolve = resolve;
-			});
-			const promise2 = expect.promise((resolve, reject) => {
-				promise2Resolve = resolve;
-			});
-
-			loadOptions.withArgs('te').returns(promise1);
-			loadOptions.withArgs('tes').returns(promise2);
-
-			const firstResult = typeSearchText('te');
-			const secondResult = typeSearchText('tes');
-
-			promise2Resolve({ options: [ { value: 2, label: 'test' } ] });
-			promise1Resolve({ options: [ { value: 1, label: 'test to ignore' } ] });
-
-			return expect.promise.all([firstResult, secondResult]).then(() => {
-				return expect(renderer, 'to have rendered',
-					<Select
-						isLoading={false}
-						placeholder="Select..."
-						noResultsText="No results found"
-						options={ [ { value: 2, label: 'test' } ] }
-					/>);
-			});
-		});
-
-		it('treats a rejected promise as empty options', () => {
-
-			let promise1Resolve, promise2Reject;
-
-			const promise1 = expect.promise((resolve, reject) => {
-				promise1Resolve = resolve;
-			});
-			const promise2 = expect.promise((resolve, reject) => {
-				promise2Reject = reject;
-			});
-			loadOptions.withArgs('te').returns(promise1);
-
-			loadOptions.withArgs('tes').returns(promise2);
-
-			const result1 = typeSearchText('te');
-			const result2 = typeSearchText('tes');
-			promise1Resolve({ options: [ { value: 1, label: 'from te input' }] });
-			promise2Reject();
-
-			return expect.promise.all([ result1, result2]).then(() => {
-				// Previous results (from 'te') are thrown away, and we render with an empty options list
-				return expect(renderer, 'to have rendered', <Select options={ [] }/>);
-			});
-		});
-	});
-
-	describe('with an onInputChange prop', () => {
-
-		let input;
-		const onInputChange = v => input = v;
-
-		beforeEach(() => {
-
-			// Render an instance of the component
-			renderer.render(<Select.Async
-				loadOptions={loadOptions}
-				minimumInput={1}
-				onInputChange={onInputChange}
-			/>);
-		});
-
-		it('calls through to the provided onInputChange function', () => {
-			typeSearchText('hi');
-			return expect(input, 'to equal', 'hi');
-		});
-	});
-
-	describe('with an isLoading prop', () => {
-
-		beforeEach(() => {
-
-			// Render an instance of the component
-			renderer.render(<Select.Async
-				loadOptions={loadOptions}
-				minimumInput={1}
-				isLoading
-			/>);
-		});
-
-		it('forces the isLoading prop on Select', () => {
-			return expect(renderer, 'to have rendered',
-			<Select
-				isLoading
-				noResultsText="Searching..."
-				placeholder="Loading..."
-			/>);
-		});
-	});
-
-	describe('with a cache', () => {
-
-		beforeEach(() => {
-
-			// Render an instance of the component
-			renderer.render(<Select.Async
-				loadOptions={loadOptions}
-				minimumInput={1}
-				cache={ {} }
-			/>);
-		});
-
-		it('caches previous responses', () => {
-			loadOptions.withArgs('te').returns(expect.promise((resolve,reject) => {
-				resolve({ options: [{ value: 'te', label: 'test 1' }] });
-			}));
-			loadOptions.withArgs('tes').returns(expect.promise((resolve,reject) => {
-				resolve({ options: [{ value: 'tes', label: 'test 2' } ] });
-			}));
-
-			// Need to wait for the results be returned, otherwise the cache won't be used
-			return typeSearchText('te')
-				.then(() => typeSearchText('tes'))
-				.then(() => typeSearchText('te')) // this should use the cache
-				.then(() => {
-					return expect(loadOptions, 'was called times', 2);
+  let asyncInstance, asyncNode, filterInputNode, loadOptions, renderer;
+
+  beforeEach(() => renderer = TestUtils.createRenderer());
+
+  function createControl (props = {}) {
+    loadOptions = props.loadOptions || sinon.stub();
+    asyncInstance = TestUtils.renderIntoDocument(
+      <Select.Async
+      	openOnFocus
+        {...props}
+        loadOptions={loadOptions}
+      />
+    );
+    asyncNode = ReactDOM.findDOMNode(asyncInstance);
+    findAndFocusInputControl();
+  };
+
+  function createOptionsResponse (options) {
+  	return {
+  		options: options.map((option) => ({
+	  		label: option,
+	  		value: option
+	  	}))
+	  };
+  }
+
+  function findAndFocusInputControl () {
+    filterInputNode = asyncNode.querySelector('input');
+    if (filterInputNode) {
+      TestUtils.Simulate.focus(filterInputNode);
+    }
+  };
+
+  function typeSearchText (text) {
+    TestUtils.Simulate.change(filterInputNode, { target: { value: text } });
+  };
+
+  describe('autoload', () => {
+    it('false does not call loadOptions on-mount', () => {
+      createControl({
+        autoload: false
+      });
+      expect(loadOptions, 'was not called');
+    });
+
+    it('true calls loadOptions on-mount', () => {
+      createControl({
+        autoload: true,
+      });
+      expect(loadOptions, 'was called');
+    });
+  });
+
+  describe('loadOptions', () => {
+    it('calls the loadOptions when search input text changes', () => {
+      createControl({
+        autoload: false
+      });
+      typeSearchText('te');
+      typeSearchText('tes');
+      typeSearchText('te');
+      return expect(loadOptions, 'was called times', 3);
+    });
+
+    it('shows the loadingPlaceholder text while options are being fetched', () => {
+      function loadOptions (input, callback) {}
+      createControl({
+        loadOptions,
+        loadingPlaceholder: 'Loading'
+      });
+      typeSearchText('te');
+      return expect(asyncNode.textContent, 'to contain', 'Loading');
+    });
+
+  	describe('with callbacks', () => {
+	    it('should display the loaded options', () => {
+	      function loadOptions (input, resolve) {
+		       resolve(null, createOptionsResponse(['foo']));
+	      }
+	      createControl({
+	      	autoload: false,
+	      	loadOptions
+	    	});
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+	      typeSearchText('foo');
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+	      expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'foo');
+	    });
+
+	    it('should display the most recently-requested loaded options (if results are returned out of order)', () => {
+	      const callbacks = [];
+	      function loadOptions (input, callback) {
+	        callbacks.push(callback);
+	      }
+	      createControl({
+	      	autoload: false,
+	      	loadOptions
+	    	});
+	      typeSearchText('foo');
+	      typeSearchText('bar');
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+	      callbacks[1](null, createOptionsResponse(['bar']));
+	      callbacks[0](null, createOptionsResponse(['foo']));
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+	      expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar');
+	    });
+
+	    it('should handle an error by setting options to an empty array', () => {
+	      function loadOptions (input, resolve) {
+	      	resolve(new Error('error'));
+	      }
+	      createControl({
+	      	autoload: false,
+	      	loadOptions,
+	      	options: createOptionsResponse(['foo']).options
+	    	});
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+	      typeSearchText('bar');
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+	    });
+    });
+
+  	/* @TODO The Promise-based tests aren't working yet; not sure why
+  	describe('with promises', () => {
+	    it('should display the loaded options', () => {
+	    	let promise;
+	    	function loadOptions (input) {
+	    		promise = expect.promise((resolve) => {
+						resolve(createOptionsResponse(['foo']));
+					});
+		      return promise;
+	      }
+	      createControl({
+	      	autoload: false,
+	      	loadOptions
+	    	});
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+	      typeSearchText('foo');
+	      return expect.promise.all([promise])
+	      	.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1))
+	      	.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'foo'));
+	    });
+
+	    it('should display the most recently-requested loaded options (if results are returned out of order)', () => {
+	      createControl({
+	      	autoload: false,
+	      	loadOptions
+	    	});
+				let resolveFoo, resolveBar;
+				const promiseFoo = expect.promise((resolve) => {
+					resolveFoo = resolve;
 				});
-		});
-
-		it('does not call `loadOptions` for a longer input, after a `complete=true` response', () => {
-			loadOptions.withArgs('te').returns(expect.promise((resolve,reject) => {
-				resolve({
-					complete: true,
-					options: [{ value: 'te', label: 'test 1' }]
-				});
-			}));
-
-			return typeSearchText('te')
-				.then(() => typeSearchText('tes'))
-				.then(() => {
-					return expect(loadOptions, 'was called once');
-				});
-		});
-
-		it('updates the cache when the cache is reset as a prop', () => {
-
-			renderer.render(<Select.Async
-				loadOptions={loadOptions}
-				minimumInput={1}
-				cache={ { 'tes': { options: [ { value: 1, label: 'updated cache' } ] } } }
-			/>);
-
-			typeSearchText('tes');
-			expect(loadOptions, 'was not called');
-			return expect(renderer, 'to have rendered',
-				<Select options={ [ { value: 1, label: 'updated cache' } ] } />
-			);
-		});
-
-		it('uses the longest complete response if the responses come out-of-order', () => {
-			let resolveTe, resolveTes;
-			const promises = [];
-			promises.push(loadOptions.withArgs('te').returns(expect.promise((resolve, reject) => {
-				resolveTe = () => resolve({
-					complete: true,
-					options: [ { value: 'te', label: 'test 1' } ]
-				});
-			})));
-
-			promises.push(loadOptions.withArgs('tes').returns(expect.promise((resolve, reject) => {
-				resolveTes = () => resolve({
-					complete: true,
-					options: [ { value: 'tes', label: 'test 2' } ]
+				const promiseBar = expect.promise((resolve) => {
+					resolveBar = resolve;
 				});
-			})));
-
-			/* Order is:
-			 * 1. User types 'te'
-			 * 2. loadOptions is called with 'te'
-			 * 3. User types 'tes'
-			 * 4. loadOptions is called with 'tes'
-			 * 5. Response for 'tes' comes back, with { complete: true }
-			 * 6. Response for 'te' comes back, with { complete: true }
-			 * 7. User types 'test'
-			 * 8. Expect that we get the results for 'tes' as options, not 'te'
-			 */
-
-			typeSearchText('te');
-			typeSearchText('tes');
-
-			resolveTes();
-			resolveTe();
-
-			return expect.promise.all(promises).then(() => {
-
-				typeSearchText('test');
-
-				expect(loadOptions, 'was called times', 2);
-				return expect(renderer, 'to have rendered', <Select options={
-					[ { value: 'tes', label: 'test 2' }]
-				} />);
-
-			});
-
-		});
-	});
-
-	describe('using callbacks', () => {
-
-		beforeEach(() => {
-
-			// Render an instance of the component
-			renderer.render(<Select.Async loadOptions={loadOptions} minimumInput={1}/>);
-		});
-
-		it('shows the returns options when the result returns', () => {
-
-			typeSearchText('te');
-
-			expect(loadOptions, 'was called');
-
-			const callback = loadOptions.args[0][1];
-
-			callback(null, { options: [ { value: 1, label: 'test callback' } ] });
-
-
-			return expect(renderer, 'to have rendered',
-				<Select
-					isLoading={false}
-					placeholder="Select..."
-					noResultsText="No results found"
-					options={ [ { value: 1, label: 'test callback' } ] }
-				/>);
-		});
-
-		it('renders results for each callback', () => {
-
-			typeSearchText('te');
-			typeSearchText('tes');
-
-			expect(loadOptions, 'was called times', 2);
-
-			const callback1 = loadOptions.args[0][1];
-			const callback2 = loadOptions.args[1][1];
-
-			callback1(null, { options: [ { value: 1, label: 'test callback' } ] });
-			callback2(null, { options: [ { value: 2, label: 'test callback 2' } ] });
-
-			return expect(renderer, 'to have rendered',
-				<Select
-					isLoading={false}
-					placeholder="Select..."
-					noResultsText="No results found"
-					options={ [ { value: 2, label: 'test callback 2' } ] }
-				/>);
-		});
-
-		it('ignores callbacks from earlier requests (out-of-order responses)', () => {
-
-			typeSearchText('te');
-			typeSearchText('tes');
-
-			expect(loadOptions, 'was called times', 2);
-
-			const callback1 = loadOptions.args[0][1];
-			const callback2 = loadOptions.args[1][1];
-
-			callback2(null, { options: [ { value: 2, label: 'test callback 2' } ] });
-			// Callback1 should be ignored
-			callback1(null, { options: [ { value: 1, label: 'test callback' } ] });
-
-			return expect(renderer, 'to have rendered',
-				<Select
-					isLoading={false}
-					placeholder="Select..."
-					noResultsText="No results found"
-					options={ [ { value: 2, label: 'test callback 2' } ] }
-				/>);
-		});
-
-		it('uses the cache when available', () => {
-
-			renderer.render(<Select.Async cache={true} loadOptions={loadOptions} />);
-
-			typeSearchText('te');
-			loadOptions.args[0][1](null, { options: [ { value: 1, label: 'test1' } ] });
-			typeSearchText('tes');
-			loadOptions.args[1][1](null, { options: [ { value: 2, label: 'test2' } ] });
-			typeSearchText('te');
-
-			expect(loadOptions, 'was called times', 2);
-
-			return expect(renderer, 'to have rendered',
-				<Select options={ [ { value: 1, label: 'test1' } ] } />);
-		});
-
-		it('throws an error when the callback returns an error', () => {
-
-			typeSearchText('te');
-
-			expect(() => loadOptions.args[0][1](new Error('Something went wrong')),
-				'to throw', 'Something went wrong');
-		});
-
-		it('assumes no options when the result has no `options` property', () => {
-
-			typeSearchText('te');
-			loadOptions.args[0][1](null, [ { value: 1, label: 'should be wrapped in an object' } ] );
-
-			return expect(renderer, 'to have rendered', <Select options={ [] } />);
-		});
-	});
-
-	describe('with minimumInput', () => {
-
-		describe('=0', () => {
-
-			beforeEach(() => {
-				renderer.render(<Select.Async loadOptions={loadOptions} minimumInput={0} cache={false} />);
-			});
-
-			it('calls loadOptions immediately', () => {
-				// componentDidMount is not currently called with the shallowRenderer, so we need to fake it here
-				// When we upgrade to 0.15, we'll be able to use renderer.getMountedInstance()
-				// (or, componentDidMount will be called with the shallow renderer)
-				renderer._instance._instance.componentDidMount();
-				expect(loadOptions, 'was called');
-			});
-
-			it('calls loadOptions again when input returns to empty', () => {
-
-				renderer._instance._instance.componentDidMount();
-				typeSearchText('t');
-				typeSearchText('');
-				expect(loadOptions, 'was called times', 3);
-			});
-		});
-
-		describe('=3', () => {
-
-			beforeEach(() => {
-				renderer.render(<Select.Async loadOptions={loadOptions} minimumInput={3} cache={false} />);
-			});
-
-			it('does not call loadOptions initially', () => {
-
-				renderer._instance._instance.componentDidMount();
-				expect(loadOptions, 'was not called');
-			});
-
-			it('does not call loadOptions when 2 characters are entered', () => {
-
-				typeSearchText('te');
-				expect(loadOptions, 'was not called');
-			});
-
-			it('calls loadOptions when 3 characters are entered', () => {
-
-				typeSearchText('tes');
-				expect(loadOptions, 'was called');
-			});
-
-			it('resets to `type to search` when text returns to < 3', () => {
-
-				typeSearchText('tes');
-				loadOptions.args[0][1](null, { options: [ { value: 1, label: 'test1' } ] });
-
-				typeSearchText('te');
-				return expect(renderer, 'to have rendered',
-					<Select
-						options={ [] }
-						placeholder="Select..."
-						noResultsText="Type to search"
-					/>);
-
-			});
-		});
-	});
-
-	describe('with ignoreAccents', () => {
-
-		beforeEach(() => {
-			renderer.render(<Select.Async
-				loadOptions={loadOptions}
-				ignoreAccents={true}
-				ignoreCase={false}
-				cache={false} />);
-		});
-
-		it('calls loadOptions with unchanged text', () => {
-
-			typeSearchText('TeSt');
-			expect(loadOptions, 'was called with', 'TeSt');
-		});
-
-		it('calls loadOptions with accents stripped', () =>  {
-			typeSearchText('Gedünstmaßig');
-			// This should really be Gedunstmassig: ß -> ss
-			expect(loadOptions, 'was called with', 'Gedunstmasig');
-		});
-	});
-
-	describe('with ignore case', () => {
-
-		beforeEach(() => {
-
-			renderer.render(<Select.Async
-				loadOptions={loadOptions}
-				ignoreAccents={false}
-				ignoreCase={true}
-				cache={false} />);
-		});
-
-		it('converts everything to lowercase', () => {
-
-			typeSearchText('TeSt');
-			expect(loadOptions, 'was called with', 'test');
-		});
-
-		it('converts accents to lowercase', () => {
-
-			typeSearchText('WÄRE');
-			expect(loadOptions, 'was called with', 'wäre');
-		});
-	});
-
-	describe('with ignore case and ignore accents', () => {
-
-		beforeEach(() => {
-
-			renderer.render(<Select.Async
-				loadOptions={loadOptions}
-				ignoreAccents={true}
-				ignoreCase={true}
-				cache={false} />);
-		});
-
-		it('converts everything to lowercase', () => {
-
-			typeSearchText('TeSt');
-			expect(loadOptions, 'was called with', 'test');
-		});
-
-		it('removes accents and converts to lowercase', () => {
-
-			typeSearchText('WÄRE');
-			expect(loadOptions, 'was called with', 'ware');
-		});
-	});
-
-	describe('children function', () => {
-		it('should allow a custom select type to be rendered', () => {
-			let childProps;
-			const node = ReactDOM.findDOMNode(
-				TestUtils.renderIntoDocument(
-					<Select.Async loadOptions={loadOptions}>
-						{(props) => {
-							childProps = props;
-							return <div>faux select</div>;
-						}}
-					</Select.Async>
-				)
-			);
-			expect(node.textContent, 'to equal', 'faux select');
-			expect(childProps.isLoading, 'to equal', true);
-		});
-
-		it('should render a Select component by default', () => {
-			const node = ReactDOM.findDOMNode(
-				TestUtils.renderIntoDocument(
-					<Select.Async loadOptions={loadOptions} />
-				)
-			);
-			expect(node.className, 'to contain', 'Select');
-		});
-	});
+				loadOptions.withArgs('foo').returns(promiseFoo);
+				loadOptions.withArgs('bar').returns(promiseBar);
+	      typeSearchText('foo');
+	      typeSearchText('bar');
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+	      resolveBar(createOptionsResponse(['bar']));
+	      resolveFoo(createOptionsResponse(['foo']));
+	      return expect.promise.all([promiseFoo, promiseBar])
+	      	.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1))
+	      	.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar'));
+	    });
+
+	    it('should handle an error by setting options to an empty array', () => {
+	    	let promise, rejectPromise;
+	      function loadOptions (input, resolve) {
+	    		promise = expect.promise((resolve, reject) => {
+						rejectPromise = reject;
+					});
+		      return promise;
+	      }
+	      createControl({
+	      	autoload: false,
+	      	loadOptions,
+	      	options: createOptionsResponse(['foo']).options
+	    	});
+	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+	      typeSearchText('bar');
+	      rejectPromise();
+	      return expect.promise.all([promise])
+	      	.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0));
+	    });
+    });
+    */
+  });
 });

From b319024b20745e2cf788e7d08978376b493a08ac Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 18 Sep 2016 06:30:36 -0700
Subject: [PATCH 2/7] Implemented and tested cache. Also fixed a spacing issue.

---
 src/Async.js       |  39 +++--
 test/Async-test.js | 397 +++++++++++++++++++++++++--------------------
 2 files changed, 246 insertions(+), 190 deletions(-)

diff --git a/src/Async.js b/src/Async.js
index 5886f9ba56..8f8d7bb36a 100644
--- a/src/Async.js
+++ b/src/Async.js
@@ -2,21 +2,20 @@ import React, { Component, PropTypes } from 'react';
 import Select from './Select';
 import stripDiacritics from './utils/stripDiacritics';
 
-// @TODO Implement cache
-
 const propTypes = {
-	autoload: React.PropTypes.bool.isRequired,
-	children: React.PropTypes.func.isRequired,			// Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
-	ignoreAccents: React.PropTypes.bool,             // whether to strip diacritics when filtering (shared with Select)
-	ignoreCase: React.PropTypes.bool,                // whether to perform case-insensitive filtering (shared with Select)
-	loadingPlaceholder: PropTypes.string.isRequired,
-	loadOptions: React.PropTypes.func.isRequired,
-	options: PropTypes.array.isRequired,
-	placeholder: React.PropTypes.oneOfType([
+	autoload: React.PropTypes.bool.isRequired,       // automatically call the `loadOptions` prop on-mount; defaults to true
+	cache: React.PropTypes.any,                      // object to use to cache results; set to null/false to disable caching
+	children: React.PropTypes.func.isRequired,       // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
+	ignoreAccents: React.PropTypes.bool,             // strip diacritics when filtering; defaults to true
+	ignoreCase: React.PropTypes.bool,                // perform case-insensitive filtering; defaults to true
+	loadingPlaceholder: PropTypes.string.isRequired, // replaces the placeholder while options are loading
+	loadOptions: React.PropTypes.func.isRequired,    // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise
+	options: PropTypes.array.isRequired,             // array of options
+	placeholder: React.PropTypes.oneOfType([         // field placeholder, displayed when there's no value (shared with Select)
 		React.PropTypes.string,
 		React.PropTypes.node
 	]),
-	searchPromptText: React.PropTypes.oneOfType([
+	searchPromptText: React.PropTypes.oneOfType([    // label to prompt for search input
 		React.PropTypes.string,
 		React.PropTypes.node
 	]),
@@ -24,6 +23,7 @@ const propTypes = {
 
 const defaultProps = {
 	autoload: true,
+	cache: {},
 	children: defaultChildren,
 	ignoreAccents: true,
 	ignoreCase: true,
@@ -64,7 +64,18 @@ export default class Async extends Component {
 	}
 
 	loadOptions (inputValue) {
-		const { loadOptions } = this.props;
+		const { cache, loadOptions } = this.props;
+
+		if (
+			cache &&
+			cache.hasOwnProperty(inputValue)
+		) {
+			this.setState({
+				options: cache[inputValue]
+			});
+
+			return;
+		}
 
 		const callback = (error, data) => {
 			if (callback === this._callback) {
@@ -72,6 +83,10 @@ export default class Async extends Component {
 
 				const options = data && data.options || [];
 
+				if (cache) {
+					cache[inputValue] = options;
+				}
+
 				this.setState({
 					isLoading: false,
 					options
diff --git a/test/Async-test.js b/test/Async-test.js
index 05ff08699a..2ca62e207d 100644
--- a/test/Async-test.js
+++ b/test/Async-test.js
@@ -11,9 +11,9 @@ var unexpected = require('unexpected');
 var unexpectedReact = require('unexpected-react');
 var unexpectedSinon = require('unexpected-sinon');
 var expect = unexpected
-  .clone()
-  .installPlugin(unexpectedReact)
-  .installPlugin(unexpectedSinon);
+	.clone()
+	.installPlugin(unexpectedReact)
+	.installPlugin(unexpectedSinon);
 
 var React = require('react');
 var ReactDOM = require('react-dom');
@@ -23,154 +23,195 @@ var sinon = require('sinon');
 var Select = require('../src/Select');
 
 describe('Async', () => {
-  let asyncInstance, asyncNode, filterInputNode, loadOptions, renderer;
-
-  beforeEach(() => renderer = TestUtils.createRenderer());
-
-  function createControl (props = {}) {
-    loadOptions = props.loadOptions || sinon.stub();
-    asyncInstance = TestUtils.renderIntoDocument(
-      <Select.Async
-      	openOnFocus
-        {...props}
-        loadOptions={loadOptions}
-      />
-    );
-    asyncNode = ReactDOM.findDOMNode(asyncInstance);
-    findAndFocusInputControl();
-  };
-
-  function createOptionsResponse (options) {
-  	return {
-  		options: options.map((option) => ({
-	  		label: option,
-	  		value: option
-	  	}))
+	let asyncInstance, asyncNode, filterInputNode, loadOptions;
+
+	function createControl (props = {}) {
+		loadOptions = props.loadOptions || sinon.stub();
+		asyncInstance = TestUtils.renderIntoDocument(
+			<Select.Async
+				autoload={false}
+				openOnFocus
+				{...props}
+				loadOptions={loadOptions}
+			/>
+		);
+		asyncNode = ReactDOM.findDOMNode(asyncInstance);
+		findAndFocusInputControl();
+	};
+
+	function createOptionsResponse (options) {
+		return {
+			options: options.map((option) => ({
+				label: option,
+				value: option
+			}))
 	  };
-  }
-
-  function findAndFocusInputControl () {
-    filterInputNode = asyncNode.querySelector('input');
-    if (filterInputNode) {
-      TestUtils.Simulate.focus(filterInputNode);
-    }
-  };
-
-  function typeSearchText (text) {
-    TestUtils.Simulate.change(filterInputNode, { target: { value: text } });
-  };
-
-  describe('autoload', () => {
-    it('false does not call loadOptions on-mount', () => {
-      createControl({
-        autoload: false
-      });
-      expect(loadOptions, 'was not called');
-    });
-
-    it('true calls loadOptions on-mount', () => {
-      createControl({
-        autoload: true,
-      });
-      expect(loadOptions, 'was called');
-    });
-  });
-
-  describe('loadOptions', () => {
-    it('calls the loadOptions when search input text changes', () => {
-      createControl({
-        autoload: false
-      });
-      typeSearchText('te');
-      typeSearchText('tes');
-      typeSearchText('te');
-      return expect(loadOptions, 'was called times', 3);
-    });
-
-    it('shows the loadingPlaceholder text while options are being fetched', () => {
-      function loadOptions (input, callback) {}
-      createControl({
-        loadOptions,
-        loadingPlaceholder: 'Loading'
-      });
-      typeSearchText('te');
-      return expect(asyncNode.textContent, 'to contain', 'Loading');
-    });
-
-  	describe('with callbacks', () => {
-	    it('should display the loaded options', () => {
-	      function loadOptions (input, resolve) {
-		       resolve(null, createOptionsResponse(['foo']));
-	      }
-	      createControl({
-	      	autoload: false,
-	      	loadOptions
-	    	});
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
-	      typeSearchText('foo');
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
-	      expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'foo');
-	    });
-
-	    it('should display the most recently-requested loaded options (if results are returned out of order)', () => {
-	      const callbacks = [];
-	      function loadOptions (input, callback) {
-	        callbacks.push(callback);
-	      }
-	      createControl({
-	      	autoload: false,
-	      	loadOptions
-	    	});
-	      typeSearchText('foo');
-	      typeSearchText('bar');
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
-	      callbacks[1](null, createOptionsResponse(['bar']));
-	      callbacks[0](null, createOptionsResponse(['foo']));
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
-	      expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar');
-	    });
-
-	    it('should handle an error by setting options to an empty array', () => {
-	      function loadOptions (input, resolve) {
-	      	resolve(new Error('error'));
-	      }
-	      createControl({
-	      	autoload: false,
-	      	loadOptions,
-	      	options: createOptionsResponse(['foo']).options
-	    	});
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
-	      typeSearchText('bar');
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
-	    });
-    });
-
-  	/* @TODO The Promise-based tests aren't working yet; not sure why
-  	describe('with promises', () => {
-	    it('should display the loaded options', () => {
-	    	let promise;
-	    	function loadOptions (input) {
-	    		promise = expect.promise((resolve) => {
+	}
+
+	function findAndFocusInputControl () {
+		filterInputNode = asyncNode.querySelector('input');
+		if (filterInputNode) {
+			TestUtils.Simulate.focus(filterInputNode);
+		}
+	};
+
+	function typeSearchText (text) {
+		TestUtils.Simulate.change(filterInputNode, { target: { value: text } });
+	};
+
+	describe('autoload', () => {
+		it('false does not call loadOptions on-mount', () => {
+			createControl({
+				autoload: false
+			});
+			expect(loadOptions, 'was not called');
+		});
+
+		it('true calls loadOptions on-mount', () => {
+			createControl({
+				autoload: true
+			});
+			expect(loadOptions, 'was called');
+		});
+	});
+
+	describe('cache', () => {
+		it('should be used instead of loadOptions if input has been previously loaded', () => {
+			createControl();
+			typeSearchText('a');
+			return expect(loadOptions, 'was called times', 1);
+			typeSearchText('b');
+			return expect(loadOptions, 'was called times', 2);
+			typeSearchText('a');
+			return expect(loadOptions, 'was called times', 2);
+			typeSearchText('b');
+			return expect(loadOptions, 'was called times', 2);
+			typeSearchText('c');
+			return expect(loadOptions, 'was called times', 3);
+		});
+
+		it('can be disabled by passing null/false', () => {
+			createControl({
+				cache: false
+			});
+			typeSearchText('a');
+			return expect(loadOptions, 'was called times', 1);
+			typeSearchText('b');
+			return expect(loadOptions, 'was called times', 2);
+			typeSearchText('a');
+			return expect(loadOptions, 'was called times', 3);
+			typeSearchText('b');
+			return expect(loadOptions, 'was called times', 4);
+		});
+
+		it('can be customized', () => {
+			createControl({
+				cache: {
+					a: []
+				}
+			});
+			typeSearchText('a');
+			return expect(loadOptions, 'was called times', 0);
+			typeSearchText('b');
+			return expect(loadOptions, 'was called times', 1);
+			typeSearchText('a');
+			return expect(loadOptions, 'was called times', 1);
+		});
+	});
+
+	describe('loadOptions', () => {
+		it('calls the loadOptions when search input text changes', () => {
+			createControl();
+			typeSearchText('te');
+			typeSearchText('tes');
+			typeSearchText('te');
+			return expect(loadOptions, 'was called times', 3);
+		});
+
+		it('shows the loadingPlaceholder text while options are being fetched', () => {
+			function loadOptions (input, callback) {}
+			createControl({
+				loadOptions,
+				loadingPlaceholder: 'Loading'
+			});
+			typeSearchText('te');
+			return expect(asyncNode.textContent, 'to contain', 'Loading');
+		});
+
+		describe('with callbacks', () => {
+			it('should display the loaded options', () => {
+				function loadOptions (input, resolve) {
+					resolve(null, createOptionsResponse(['foo']));
+				}
+				createControl({
+					cache: false,
+					loadOptions
+				});
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+				typeSearchText('foo');
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+				expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'foo');
+			});
+
+			it('should display the most recently-requested loaded options (if results are returned out of order)', () => {
+				const callbacks = [];
+				function loadOptions (input, callback) {
+				  callbacks.push(callback);
+				}
+				createControl({
+					cache: false,
+					loadOptions
+				});
+				typeSearchText('foo');
+				typeSearchText('bar');
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+				callbacks[1](null, createOptionsResponse(['bar']));
+				callbacks[0](null, createOptionsResponse(['foo']));
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+				expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar');
+			});
+
+			it('should handle an error by setting options to an empty array', () => {
+				function loadOptions (input, resolve) {
+					resolve(new Error('error'));
+				}
+				createControl({
+					cache: false,
+					loadOptions,
+					options: createOptionsResponse(['foo']).options
+				});
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+				typeSearchText('bar');
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+			});
+		});
+
+		/* @TODO The Promise-based tests aren't working yet; not sure why
+		describe('with promises', () => {
+			it('should display the loaded options', () => {
+				let promise;
+				function loadOptions (input) {
+					promise = expect.promise((resolve) => {
 						resolve(createOptionsResponse(['foo']));
 					});
-		      return promise;
-	      }
-	      createControl({
-	      	autoload: false,
-	      	loadOptions
-	    	});
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
-	      typeSearchText('foo');
-	      return expect.promise.all([promise])
-	      	.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1))
-	      	.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'foo'));
-	    });
-
-	    it('should display the most recently-requested loaded options (if results are returned out of order)', () => {
-	      createControl({
-	      	autoload: false,
-	      	loadOptions
-	    	});
+					return promise;
+				}
+				createControl({
+					autoload: false,
+					loadOptions
+				});
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+				typeSearchText('foo');
+				return expect.promise.all([promise])
+					.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1))
+					.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'foo'));
+			});
+
+			it('should display the most recently-requested loaded options (if results are returned out of order)', () => {
+				createControl({
+					autoload: false,
+					loadOptions
+				});
 				let resolveFoo, resolveBar;
 				const promiseFoo = expect.promise((resolve) => {
 					resolveFoo = resolve;
@@ -180,36 +221,36 @@ describe('Async', () => {
 				});
 				loadOptions.withArgs('foo').returns(promiseFoo);
 				loadOptions.withArgs('bar').returns(promiseBar);
-	      typeSearchText('foo');
-	      typeSearchText('bar');
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
-	      resolveBar(createOptionsResponse(['bar']));
-	      resolveFoo(createOptionsResponse(['foo']));
-	      return expect.promise.all([promiseFoo, promiseBar])
-	      	.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1))
-	      	.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar'));
-	    });
-
-	    it('should handle an error by setting options to an empty array', () => {
-	    	let promise, rejectPromise;
-	      function loadOptions (input, resolve) {
-	    		promise = expect.promise((resolve, reject) => {
+				typeSearchText('foo');
+				typeSearchText('bar');
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
+				resolveBar(createOptionsResponse(['bar']));
+				resolveFoo(createOptionsResponse(['foo']));
+				return expect.promise.all([promiseFoo, promiseBar])
+					.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1))
+					.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar'));
+			});
+
+			it('should handle an error by setting options to an empty array', () => {
+				let promise, rejectPromise;
+				function loadOptions (input, resolve) {
+					promise = expect.promise((resolve, reject) => {
 						rejectPromise = reject;
 					});
-		      return promise;
-	      }
-	      createControl({
-	      	autoload: false,
-	      	loadOptions,
-	      	options: createOptionsResponse(['foo']).options
-	    	});
-	      expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
-	      typeSearchText('bar');
-	      rejectPromise();
-	      return expect.promise.all([promise])
-	      	.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0));
-	    });
-    });
-    */
-  });
+					return promise;
+				}
+				createControl({
+					autoload: false,
+					loadOptions,
+					options: createOptionsResponse(['foo']).options
+				});
+				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+				typeSearchText('bar');
+				rejectPromise();
+				return expect.promise.all([promise])
+					.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0));
+			});
+		});
+		*/
+	});
 });

From 3c3e0e58b9c3ebdd4eecdc841a3f2a0a4fd60dfc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 18 Sep 2016 06:30:52 -0700
Subject: [PATCH 3/7] Fixed .editorconfig tab issue

---
 .editorconfig | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.editorconfig b/.editorconfig
index 20338e3a1a..2d16f58976 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,6 +8,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = tab
+translate_tabs_to_spaces = false
 
 [*.json]
 indent_style = space

From 6cfad88c72b15cbc8bef406b70faa4e07cc0cbb6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 18 Sep 2016 07:07:40 -0700
Subject: [PATCH 4/7] Fixed 2 of the 3 Promise-based tests

---
 test/Async-test.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/test/Async-test.js b/test/Async-test.js
index 2ca62e207d..e54cd59ca5 100644
--- a/test/Async-test.js
+++ b/test/Async-test.js
@@ -186,18 +186,18 @@ describe('Async', () => {
 			});
 		});
 
-		/* @TODO The Promise-based tests aren't working yet; not sure why
 		describe('with promises', () => {
 			it('should display the loaded options', () => {
 				let promise;
 				function loadOptions (input) {
-					promise = expect.promise((resolve) => {
+					promise = expect.promise((resolve, reject) => {
 						resolve(createOptionsResponse(['foo']));
 					});
 					return promise;
 				}
 				createControl({
 					autoload: false,
+					cache: false,
 					loadOptions
 				});
 				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0);
@@ -210,13 +210,13 @@ describe('Async', () => {
 			it('should display the most recently-requested loaded options (if results are returned out of order)', () => {
 				createControl({
 					autoload: false,
-					loadOptions
+					cache: false
 				});
 				let resolveFoo, resolveBar;
-				const promiseFoo = expect.promise((resolve) => {
+				const promiseFoo = expect.promise((resolve, reject) => {
 					resolveFoo = resolve;
 				});
-				const promiseBar = expect.promise((resolve) => {
+				const promiseBar = expect.promise((resolve, reject) => {
 					resolveBar = resolve;
 				});
 				loadOptions.withArgs('foo').returns(promiseFoo);
@@ -231,7 +231,11 @@ describe('Async', () => {
 					.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar'));
 			});
 
-			it('should handle an error by setting options to an empty array', () => {
+			// @TODO This test is failing for unknown reasons with the following error:
+			//   Error: Promise rejected with no or falsy reason
+			// It seems to be more or less then same as this test (which passes):
+			// https://github.com/JedWatson/react-select/blob/916ab0e62fc7394be8e24f22251c399a68de8b1c/test/Async-test.js#L158-L181
+			it.skip('should handle an error by setting options to an empty array', () => {
 				let promise, rejectPromise;
 				function loadOptions (input, resolve) {
 					promise = expect.promise((resolve, reject) => {
@@ -241,6 +245,7 @@ describe('Async', () => {
 				}
 				createControl({
 					autoload: false,
+					cache: false,
 					loadOptions,
 					options: createOptionsResponse(['foo']).options
 				});
@@ -251,6 +256,5 @@ describe('Async', () => {
 					.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0));
 			});
 		});
-		*/
 	});
 });

From b8833443dec9d649214c417804efda2bef2c21fa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 18 Sep 2016 07:20:27 -0700
Subject: [PATCH 5/7] Resolved failing Async-Promise test

---
 test/Async-test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/Async-test.js b/test/Async-test.js
index e54cd59ca5..58a6fa4678 100644
--- a/test/Async-test.js
+++ b/test/Async-test.js
@@ -235,7 +235,7 @@ describe('Async', () => {
 			//   Error: Promise rejected with no or falsy reason
 			// It seems to be more or less then same as this test (which passes):
 			// https://github.com/JedWatson/react-select/blob/916ab0e62fc7394be8e24f22251c399a68de8b1c/test/Async-test.js#L158-L181
-			it.skip('should handle an error by setting options to an empty array', () => {
+			it('should handle an error by setting options to an empty array', () => {
 				let promise, rejectPromise;
 				function loadOptions (input, resolve) {
 					promise = expect.promise((resolve, reject) => {
@@ -251,9 +251,9 @@ describe('Async', () => {
 				});
 				expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
 				typeSearchText('bar');
-				rejectPromise();
+				rejectPromise(new Error('error'));
 				return expect.promise.all([promise])
-					.then(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0));
+					.catch(() => expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 0));
 			});
 		});
 	});

From f822236fc3e0d4fdc00adb2187880f75f79119da Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 18 Sep 2016 07:29:19 -0700
Subject: [PATCH 6/7] Added some additional Async tests

---
 test/Async-test.js | 105 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 101 insertions(+), 4 deletions(-)

diff --git a/test/Async-test.js b/test/Async-test.js
index 58a6fa4678..72368dec06 100644
--- a/test/Async-test.js
+++ b/test/Async-test.js
@@ -231,10 +231,6 @@ describe('Async', () => {
 					.then(() => expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar'));
 			});
 
-			// @TODO This test is failing for unknown reasons with the following error:
-			//   Error: Promise rejected with no or falsy reason
-			// It seems to be more or less then same as this test (which passes):
-			// https://github.com/JedWatson/react-select/blob/916ab0e62fc7394be8e24f22251c399a68de8b1c/test/Async-test.js#L158-L181
 			it('should handle an error by setting options to an empty array', () => {
 				let promise, rejectPromise;
 				function loadOptions (input, resolve) {
@@ -257,4 +253,105 @@ describe('Async', () => {
 			});
 		});
 	});
+
+	describe('with ignoreAccents', () => {
+		it('calls loadOptions with unchanged text', () => {
+			createControl({
+				ignoreAccents: true,
+				ignoreCase: false
+			});
+			typeSearchText('TeSt');
+			expect(loadOptions, 'was called with', 'TeSt');
+		});
+
+		it('strips accents before calling loadOptions when enabled', () => {
+			createControl({
+				ignoreAccents: true,
+				ignoreCase: false
+			});
+			typeSearchText('Gedünstmaßig');
+			// This should really be Gedunstmassig: ß -> ss
+			expect(loadOptions, 'was called with', 'Gedunstmasig');
+		});
+
+		it('does not strip accents before calling loadOptions when diabled', () => {
+			createControl({
+				ignoreAccents: false,
+				ignoreCase: false
+			});
+			typeSearchText('Gedünstmaßig');
+			expect(loadOptions, 'was called with', 'Gedünstmaßig');
+		});
+	});
+
+	describe('with ignore case', () => {
+		it('converts everything to lowercase when enabled', () => {
+			createControl({
+				ignoreAccents: false,
+				ignoreCase: true
+			});
+			typeSearchText('TeSt');
+			expect(loadOptions, 'was called with', 'test');
+		});
+
+		it('converts accents to lowercase when enabled', () => {
+			createControl({
+				ignoreAccents: false,
+				ignoreCase: true
+			});
+			typeSearchText('WÄRE');
+			expect(loadOptions, 'was called with', 'wäre');
+		});
+
+		it('does not convert text to lowercase when disabled', () => {
+			createControl({
+				ignoreAccents: false,
+				ignoreCase: false
+			});
+			typeSearchText('WÄRE');
+			expect(loadOptions, 'was called with', 'WÄRE');
+		});
+	});
+
+	describe('with ignore case and ignore accents', () => {
+		it('converts everything to lowercase', () => {
+			createControl({
+				ignoreAccents: true,
+				ignoreCase: true
+			});
+			typeSearchText('TeSt');
+			expect(loadOptions, 'was called with', 'test');
+		});
+
+		it('removes accents and converts to lowercase', () => {
+			createControl({
+				ignoreAccents: true,
+				ignoreCase: true
+			});
+			typeSearchText('WÄRE');
+			expect(loadOptions, 'was called with', 'ware');
+		});
+	});
+
+	describe('children function', () => {
+		it('should allow a custom select type to be rendered', () => {
+			let childProps;
+			createControl({
+				autoload: true,
+				children: (props) => {
+					childProps = props;
+					return (
+						<div>faux select</div>
+					);
+				}
+			});
+			expect(asyncNode.textContent, 'to equal', 'faux select');
+			expect(childProps.isLoading, 'to equal', true);
+		});
+
+		it('should render a Select component by default', () => {
+			createControl();
+			expect(asyncNode.className, 'to contain', 'Select');
+		});
+	});
 });

From c50e47c0db000762af8ed65a70ba072d8e92f0e4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 18 Sep 2016 07:35:29 -0700
Subject: [PATCH 7/7] Added toggleable backspace removes options to Github demo
 for Async

---
 examples/src/components/GithubUsers.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/examples/src/components/GithubUsers.js b/examples/src/components/GithubUsers.js
index 582c131340..1c8bcdb49e 100644
--- a/examples/src/components/GithubUsers.js
+++ b/examples/src/components/GithubUsers.js
@@ -10,6 +10,7 @@ const GithubUsers = React.createClass({
 	},
 	getInitialState () {
 		return {
+			backspaceRemoves: true,
 			multi: true
 		};
 	},
@@ -44,6 +45,11 @@ const GithubUsers = React.createClass({
 	gotoUser (value, event) {
 		window.open(value.html_url);
 	},
+	toggleBackspaceRemoves () {
+		this.setState({
+			backspaceRemoves: !this.state.backspaceRemoves
+		});
+	},
 	toggleCreatable () {
 		this.setState({
 			creatable: !this.state.creatable
@@ -57,7 +63,7 @@ const GithubUsers = React.createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<AsyncComponent multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" loadOptions={this.getUsers} backspaceRemoves={false} />
+				<AsyncComponent multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" loadOptions={this.getUsers} backspaceRemoves={this.state.backspaceRemoves} />
 				<div className="checkbox-list">
 					<label className="checkbox">
 						<input type="radio" className="checkbox-control" checked={this.state.multi} onChange={this.switchToMulti}/>
@@ -73,6 +79,10 @@ const GithubUsers = React.createClass({
 					   <input type="checkbox" className="checkbox-control" checked={this.state.creatable} onChange={this.toggleCreatable} />
 					   <span className="checkbox-label">Creatable?</span>
 					</label>
+					<label className="checkbox">
+					   <input type="checkbox" className="checkbox-control" checked={this.state.backspaceRemoves} onChange={this.toggleBackspaceRemoves} />
+					   <span className="checkbox-label">Backspace Removes?</span>
+					</label>
 				</div>
 				<div className="hint">This example uses fetch.js for showing Async options with Promises</div>
 			</div>