diff --git a/package.json b/package.json index f17ccc7e1d..281b6a92f4 100644 --- a/package.json +++ b/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", diff --git a/src/Async.js b/src/Async.js index 77544596d8..dc187367f2 100644 --- a/src/Async.js +++ b/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 }); } }