From 295a49c7182c5c5091e8c6ae77f0ee53e4a16427 Mon Sep 17 00:00:00 2001 From: Zuzanna Furtak Date: Thu, 20 Nov 2025 16:51:08 +0100 Subject: [PATCH 1/3] Make SearchFiltersWorkspacePage use new SelectionList --- .../SelectionList/BaseSelectionList.tsx | 2 ++ src/components/SelectionList/types.ts | 3 +++ .../SearchFiltersWorkspacePage.tsx | 27 ++++++++++++------- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 8b47d7d2462f..69a00377c56a 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -78,6 +78,7 @@ function BaseSelectionList({ shouldPreventDefaultFocusOnSelectRow = false, shouldShowTextInput = !!textInputOptions?.label, shouldHighlightSelectedItem = true, + shouldUseDefaultRightHandSideCheckmark, }: SelectionListProps) { const styles = useThemeStyles(); const isFocused = useIsFocused(); @@ -308,6 +309,7 @@ function BaseSelectionList({ isDisabled={isItemDisabled} canSelectMultiple={canSelectMultiple} shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect} + shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} isMultilineSupported={isRowMultilineSupported} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 81091d660a23..34734437af8e 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -147,6 +147,9 @@ type SelectionListProps = Partial & { /** Whether to highlight the selected item */ shouldHighlightSelectedItem?: boolean; + + /** Whether to show the default right hand side checkmark */ + shouldUseDefaultRightHandSideCheckmark?: boolean; }; type TextInputOptions = { diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx index 9e07c3fb7907..c15950708e3b 100644 --- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx +++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx @@ -1,11 +1,11 @@ import {emailSelector} from '@selectors/Session'; -import React, {useCallback, useState} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons'; -import SelectionList from '@components/SelectionListWithSections'; -import UserListItem from '@components/SelectionListWithSections/UserListItem'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/ListItem/UserListItem'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -40,7 +40,7 @@ function SearchFiltersWorkspacePage() { const [selectedOptions, setSelectedOptions] = useState(() => (searchAdvancedFiltersForm?.policyID ? Array.from(searchAdvancedFiltersForm?.policyID) : [])); - const {sections, shouldShowNoResultsFoundMessage, shouldShowSearchInput} = useWorkspaceList({ + const {data, shouldShowNoResultsFoundMessage, shouldShowSearchInput} = useWorkspaceList({ policies, currentUserLogin, shouldShowPendingDeletePolicy: false, @@ -75,6 +75,16 @@ function SearchFiltersWorkspacePage() { setSelectedOptions([]); }, []); + const textInputOptions = useMemo( + () => ({ + label: shouldShowSearchInput ? translate('common.search') : undefined, + value: searchTerm, + onChangeText: setSearchTerm, + headerMessage: shouldShowNoResultsFoundMessage ? translate('common.noResultsFound') : '', + }), + [searchTerm, setSearchTerm, shouldShowNoResultsFoundMessage, shouldShowSearchInput, translate], + ); + return ( ) : ( + data={data} ListItem={UserListItem} - sections={sections} + onSelectRow={selectWorkspace} + textInputOptions={textInputOptions} canSelectMultiple shouldUseDefaultRightHandSideCheckmark - textInputLabel={shouldShowSearchInput ? translate('common.search') : undefined} - textInputValue={searchTerm} - onChangeText={setSearchTerm} - onSelectRow={selectWorkspace} - headerMessage={shouldShowNoResultsFoundMessage ? translate('common.noResultsFound') : ''} showLoadingPlaceholder={isLoadingOnyxValue(policiesResult) || !didScreenTransitionEnd} footerContent={ Date: Thu, 20 Nov 2025 17:26:52 +0100 Subject: [PATCH 2/3] Fix ts --- src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx index 78eca0b81b07..380b2d7162af 100644 --- a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx +++ b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx @@ -68,7 +68,7 @@ function AmexCustomFeed() { }, ]; - const confirmButtonConfig = useMemo( + const confirmButtonOptions = useMemo( () => ({ showButton: true, text: translate('common.next'), @@ -101,7 +101,7 @@ function AmexCustomFeed() { setTypeSelected(value); setHasError(false); }} - confirmButtonConfig={confirmButtonConfig} + confirmButtonOptions={confirmButtonOptions} shouldSingleExecuteRowSelect alternateNumberOfSupportedLines={3} initiallyFocusedItemKey={addNewCard?.data.selectedAmexCustomFeed ?? undefined} From 1092ba415efc2174ecaa5b00dba8f3b2f28d2354 Mon Sep 17 00:00:00 2001 From: Zuzanna Furtak Date: Sun, 23 Nov 2025 20:06:47 +0100 Subject: [PATCH 3/3] Fix scrolling to a chosen option --- .../SearchFiltersWorkspacePage.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx index c15950708e3b..2e536cddd8b3 100644 --- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx +++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx @@ -1,11 +1,12 @@ import {emailSelector} from '@selectors/Session'; -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useMemo, useRef, useState} from 'react'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons'; import SelectionList from '@components/SelectionList'; import UserListItem from '@components/SelectionList/ListItem/UserListItem'; +import type {SelectionListHandle} from '@components/SelectionList/types'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -37,6 +38,7 @@ function SearchFiltersWorkspacePage() { const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const shouldShowLoadingIndicator = isLoadingApp && !isOffline; + const selectionListRef = useRef(null); const [selectedOptions, setSelectedOptions] = useState(() => (searchAdvancedFiltersForm?.policyID ? Array.from(searchAdvancedFiltersForm?.policyID) : [])); @@ -58,6 +60,10 @@ function SearchFiltersWorkspacePage() { if (optionIndex === -1 && option?.policyID) { setSelectedOptions([...selectedOptions, option.policyID]); + + requestAnimationFrame(() => { + selectionListRef.current?.scrollAndHighlightItem([option.keyForList]); + }); } else { const newSelectedOptions = [...selectedOptions.slice(0, optionIndex), ...selectedOptions.slice(optionIndex + 1)]; setSelectedOptions(newSelectedOptions); @@ -105,6 +111,7 @@ function SearchFiltersWorkspacePage() { ) : ( + ref={selectionListRef} data={data} ListItem={UserListItem} onSelectRow={selectWorkspace} @@ -112,6 +119,7 @@ function SearchFiltersWorkspacePage() { canSelectMultiple shouldUseDefaultRightHandSideCheckmark showLoadingPlaceholder={isLoadingOnyxValue(policiesResult) || !didScreenTransitionEnd} + disableMaintainingScrollPosition footerContent={