From c57030110d6b8c9ba0a9a453352c4b417f856935 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 6 Nov 2024 09:00:19 +0700 Subject: [PATCH 1/3] Fix list not scrolled up when search query empty --- src/components/Search/SearchRouter/SearchRouter.tsx | 7 ++++++- src/components/SelectionList/BaseSelectionList.tsx | 3 ++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 83d7d5d89b20..6f62a08db00f 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -37,6 +37,7 @@ import ROUTES from '@src/ROUTES'; import SearchRouterInput from './SearchRouterInput'; import SearchRouterList from './SearchRouterList'; import type {ItemWithQuery} from './SearchRouterList'; +import isEmpty from 'lodash/isEmpty'; type SearchRouterProps = { onRouterClose: () => void; @@ -293,6 +294,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { ], ); + const prevUserQueryRef = useRef(null); const onSearchChange = useCallback( (userQuery: string) => { let newUserQuery = userQuery; @@ -302,11 +304,14 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { setTextInputValue(newUserQuery); const autocompleteParsedQuery = parseForAutocomplete(newUserQuery); updateAutocomplete(autocompleteParsedQuery?.autocomplete?.value ?? '', autocompleteParsedQuery?.ranges ?? [], autocompleteParsedQuery?.autocomplete?.key); - if (newUserQuery) { + if (newUserQuery || !isEmpty(prevUserQueryRef.current)) { listRef.current?.updateAndScrollToFocusedIndex(0); } else { listRef.current?.updateAndScrollToFocusedIndex(-1); } + + // Store the previous newUserQuery + prevUserQueryRef.current = newUserQuery; }, [autocompleteSuggestions, setTextInputValue, updateAutocomplete], ); diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 3e1b3a3c2d70..ffb6c64a0fc5 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -572,8 +572,9 @@ function BaseSelectionList( } // Remove the focus if the search input is empty or selected options length is changed (and allOptions length remains the same) // else focus on the first non disabled item + const newSelectedIndex = - textInputValue === '' || (flattenedSections.selectedOptions.length !== prevSelectedOptionsLength && prevAllOptionsLength === flattenedSections.allOptions.length) ? -1 : 0; + (isEmpty(prevTextInputValue) && textInputValue === '') || (flattenedSections.selectedOptions.length !== prevSelectedOptionsLength && prevAllOptionsLength === flattenedSections.allOptions.length) ? -1 : 0; // reseting the currrent page to 1 when the user types something setCurrentPage(1); From 78282c3183d18147d15e051a8195a774efc741a1 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 15 Nov 2024 13:52:34 +0700 Subject: [PATCH 2/3] prettier --- src/components/SelectionList/BaseSelectionList.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 2f79c34d3f8a..1186ca9acc6f 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -649,7 +649,10 @@ function BaseSelectionList( // else focus on the first non disabled item const newSelectedIndex = - (isEmpty(prevTextInputValue) && textInputValue === '') || (flattenedSections.selectedOptions.length !== prevSelectedOptionsLength && prevAllOptionsLength === flattenedSections.allOptions.length) ? -1 : 0; + (isEmpty(prevTextInputValue) && textInputValue === '') || + (flattenedSections.selectedOptions.length !== prevSelectedOptionsLength && prevAllOptionsLength === flattenedSections.allOptions.length) + ? -1 + : 0; // reseting the currrent page to 1 when the user types something setCurrentPage(1); From 885a7b3312cd68e625289ba3edf7f86602fa14a7 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 15 Nov 2024 13:55:47 +0700 Subject: [PATCH 3/3] extend comment --- src/components/SelectionList/BaseSelectionList.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 1186ca9acc6f..66d648f1b472 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -645,9 +645,8 @@ function BaseSelectionList( ) { return; } - // Remove the focus if the search input is empty or selected options length is changed (and allOptions length remains the same) + // Remove the focus if the search input is empty and prev search input not empty or selected options length is changed (and allOptions length remains the same) // else focus on the first non disabled item - const newSelectedIndex = (isEmpty(prevTextInputValue) && textInputValue === '') || (flattenedSections.selectedOptions.length !== prevSelectedOptionsLength && prevAllOptionsLength === flattenedSections.allOptions.length)