fixed async pagination bugs

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-select",
+  "name": "react-select-rgee",
   "version": "1.0.0-rc.10",
   "description": "A Select control built with and for ReactJS",
   "main": "lib/index.js",

src/Async.js

@@ -21,7 +21,7 @@ const propTypes = {
 	onChange: PropTypes.func,                  // onChange handler: function (newValue) {}
 	onInputChange: PropTypes.func,             // optional for keeping track of what is being typed
 	options: PropTypes.array.isRequired,       // array of options
-  pagination: PropTypes.bool,								 // automatically load more options when the option list is scrolled to the end; default to false
+	pagination: PropTypes.bool,								 // automatically load more options when the option list is scrolled to the end; default to false
 	placeholder: PropTypes.oneOfType([         // field placeholder, displayed when there's no value (shared with Select)
 		PropTypes.string,
 		PropTypes.node
@@ -63,6 +63,7 @@ export default class Async extends Component {
 
 		this.onInputChange = this.onInputChange.bind(this);
 		this.onMenuScrollToBottom = this.onMenuScrollToBottom.bind(this);
+		this.onChange = this.onChange.bind(this);
 	}
 
 	componentDidMount () {
@@ -104,6 +105,10 @@ export default class Async extends Component {
 				!pagination ||
 				(pagination && (cache[inputValue].page >= page || cache[inputValue].hasReachedLastPage))
 			) {
+				this.setState({
+					isLoading: false,
+					isLoadingPage: false
+				});
 				return;
 			}
 		}
@@ -178,8 +183,11 @@ export default class Async extends Component {
 			onInputChange(transformedInputValue);
 		}
 
+		let oldInputValue = this.state.inputValue;
 		this.setState({ inputValue });
-		this.loadOptions(transformedInputValue);
+		if (inputValue !== oldInputValue) {
+			this.loadOptions(transformedInputValue);
+		}
 
 		// Return the original input value to avoid modifying the user's view of the input while typing.
 		return inputValue;
@@ -208,8 +216,19 @@ export default class Async extends Component {
 		this.loadOptions(inputValue, this.state.page + 1);
 	}
 
+	onChange(value) {
+		this.props.onChange(value);
+
+		if (this.props.pagination) {
+			let remainingOptions = this.state.options.length - value.length;
+			if (remainingOptions < 4) {
+				this.onMenuScrollToBottom(this.state.inputValue);
+			}
+		}
+	}
+
 	render () {
-		const { children, loadingPlaceholder, multi, onChange, placeholder, value } = this.props;
+		const { children, loadingPlaceholder, multi, placeholder, value } = this.props;
 		const { isLoading, isLoadingPage, options } = this.state;
 
 		const props = {
@@ -225,6 +244,7 @@ export default class Async extends Component {
 			isLoading,
 			onInputChange: this.onInputChange,
 			onMenuScrollToBottom: this.onMenuScrollToBottom,
+			onChange: this.onChange
 		});
 	}
 }