diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index aa02701b1c98..05b0e865d945 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -107,8 +107,9 @@ class BaseOptionsSelector extends Component { }); return; } - const newFocusedIndex = this.props.selectedOptions.length; + const isNewFocusedIndex = newFocusedIndex !== this.state.focusedIndex; + // eslint-disable-next-line react/no-did-update-set-state this.setState( { @@ -117,13 +118,13 @@ class BaseOptionsSelector extends Component { }, () => { // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top - if (this.props.selectedOptions.length !== prevProps.selectedOptions.length || this.props.value === '') { + if (this.props.selectedOptions.length !== prevProps.selectedOptions.length || (!!prevProps.value && !this.props.value)) { this.scrollToIndex(0); return; } // Otherwise, scroll to the focused index (as long as it's in range) - if (this.state.allOptions.length <= this.state.focusedIndex) { + if (this.state.allOptions.length <= this.state.focusedIndex || !isNewFocusedIndex) { return; } this.scrollToIndex(this.state.focusedIndex);