From 15b5f5b2ed0c6a9dca7958d443ab7a9e5fe0acb5 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 8 Jul 2022 00:03:28 -0700 Subject: [PATCH 1/2] Move scroll-to-top logic to componentDidUpdate --- src/components/OptionsSelector.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js index 8a0c3ecd8575..b1c618b3472d 100755 --- a/src/components/OptionsSelector.js +++ b/src/components/OptionsSelector.js @@ -220,6 +220,13 @@ class OptionsSelector extends Component { allOptions: newOptions, focusedIndex: newFocusedIndex, }, () => { + // If we just selected a new options on a multiple-selection page, scroll to the top + if (this.props.selectedOptions.length > prevProps.selectedOptions.length) { + 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) { return; } @@ -315,8 +322,7 @@ class OptionsSelector extends Component { return; } - // Scroll back to the top and focus the first unselected item from the list (i.e: the best result according to the current search term) - this.scrollToIndex(0); + // Focus the first unselected item from the list (i.e: the best result according to the current search term) this.setState({ focusedIndex: this.props.selectedOptions.length, }); From e9ff99c0127b25d1b0d191d0e2abdcc5fc771e5e Mon Sep 17 00:00:00 2001 From: Rory Abraham <47436092+roryabraham@users.noreply.github.com> Date: Mon, 11 Jul 2022 12:07:20 -0700 Subject: [PATCH 2/2] Update src/components/OptionsSelector.js Co-authored-by: Maria D'Costa --- src/components/OptionsSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js index b1c618b3472d..2f113f58dd03 100755 --- a/src/components/OptionsSelector.js +++ b/src/components/OptionsSelector.js @@ -220,7 +220,7 @@ class OptionsSelector extends Component { allOptions: newOptions, focusedIndex: newFocusedIndex, }, () => { - // If we just selected a new options on a multiple-selection page, scroll to the top + // If we just selected a new option on a multiple-selection page, scroll to the top if (this.props.selectedOptions.length > prevProps.selectedOptions.length) { this.scrollToIndex(0); return;