From 9448faa98f8543a720fbce24f8d01105191fe289 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Mon, 16 Jun 2025 16:21:11 +0300
Subject: [PATCH 01/16] feat: implement new design patterns in the assignee,
 to, & from search filters

---
 .../SearchFiltersParticipantsSelector.tsx     | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/Search/SearchFiltersParticipantsSelector.tsx b/src/components/Search/SearchFiltersParticipantsSelector.tsx
index 3cffa38ca100..3d7eba3d2fde 100644
--- a/src/components/Search/SearchFiltersParticipantsSelector.tsx
+++ b/src/components/Search/SearchFiltersParticipantsSelector.tsx
@@ -4,10 +4,11 @@ import Button from '@components/Button';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
 import SelectionList from '@components/SelectionList';
-import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem';
+import UserSelectionListItem from '@components/SelectionList/Search/UserSelectionListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import type {Option} from '@libs/OptionsListUtils';
@@ -37,6 +38,7 @@ type SearchFiltersParticipantsSelectorProps = {
 };
 
 function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}: SearchFiltersParticipantsSelectorProps) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const personalDetails = usePersonalDetails();
     const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
@@ -128,6 +130,17 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         };
     }, [areOptionsInitialized, cleanSearchTerm, selectedOptions, chatOptions, personalDetails, translate]);
 
+    const resetChanges = useCallback(() => {
+        setSelectedOptions([]);
+    }, []);
+
+    const applyChanges = useCallback(() => {
+        const selectedAccountIDs = selectedOptions.map((option) => (option.accountID ? option.accountID.toString() : undefined)).filter(Boolean) as string[];
+        onFiltersUpdate(selectedAccountIDs);
+
+        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+    }, [onFiltersUpdate, selectedOptions]);
+
     // This effect handles setting initial selectedOptions based on accountIDs saved in onyx form
     useEffect(() => {
         if (!initialAccountIDs || initialAccountIDs.length === 0 || !personalDetails) {
@@ -180,18 +193,22 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
     );
 
     const footerContent = (
-        <Button
-            success
-            text={translate('common.save')}
-            pressOnEnter
-            onPress={() => {
-                const selectedAccountIDs = selectedOptions.map((option) => (option.accountID ? option.accountID.toString() : undefined)).filter(Boolean) as string[];
-                onFiltersUpdate(selectedAccountIDs);
-
-                Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
-            }}
-            large
-        />
+        <>
+            <Button
+                large
+                style={[styles.mt4]}
+                text={translate('common.reset')}
+                onPress={resetChanges}
+            />
+            <Button
+                large
+                success
+                pressOnEnter
+                style={[styles.mt4]}
+                text={translate('common.save')}
+                onPress={applyChanges}
+            />
+        </>
     );
 
     const isLoadingNewOptions = !!isSearchingForReports;
@@ -201,7 +218,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         <SelectionList
             canSelectMultiple
             sections={sections}
-            ListItem={InviteMemberListItem}
+            ListItem={UserSelectionListItem}
             textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
             headerMessage={headerMessage}
             textInputValue={searchTerm}

From 0bc4324f247bdbc166eb69365d81e51a7b6a6c43 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Mon, 16 Jun 2025 16:22:33 +0300
Subject: [PATCH 02/16] feat: implement new design patterns in all search date
 filters

---
 .../Search/SearchDateFilterBase.tsx           |  87 --------------
 .../SearchDateFilterBase/CalendarView.tsx     |  80 +++++++++++++
 .../Search/SearchDateFilterBase/RootView.tsx  |  95 ++++++++++++++++
 .../Search/SearchDateFilterBase/index.tsx     | 106 ++++++++++++++++++
 4 files changed, 281 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/Search/SearchDateFilterBase.tsx
 create mode 100644 src/components/Search/SearchDateFilterBase/CalendarView.tsx
 create mode 100644 src/components/Search/SearchDateFilterBase/RootView.tsx
 create mode 100644 src/components/Search/SearchDateFilterBase/index.tsx

diff --git a/src/components/Search/SearchDateFilterBase.tsx b/src/components/Search/SearchDateFilterBase.tsx
deleted file mode 100644
index 483a1ccc0c9f..000000000000
--- a/src/components/Search/SearchDateFilterBase.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {format} from 'date-fns';
-import React from 'react';
-import {useOnyx} from 'react-native-onyx';
-import DatePicker from '@components/DatePicker';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
-import type {FormOnyxValues} from '@components/Form/types';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import ScreenWrapper from '@components/ScreenWrapper';
-import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {updateAdvancedFilters} from '@libs/actions/Search';
-import Navigation from '@libs/Navigation/Navigation';
-import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type {SearchDateFilterKeys} from './types';
-
-type SearchDateFilterBaseProps = {
-    /** Key used for the date filter */
-    dateKey: SearchDateFilterKeys;
-
-    /** The translation key for the page title */
-    titleKey: TranslationPaths;
-};
-
-function SearchDateFilterBase({dateKey, titleKey}: SearchDateFilterBaseProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-
-    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
-    const unformattedDateAfter = searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`];
-    const unformattedDateBefore = searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`];
-    const dateAfter = unformattedDateAfter ? format(unformattedDateAfter, 'yyyy-MM-dd') : undefined;
-    const dateBefore = unformattedDateBefore ? format(unformattedDateBefore, 'yyyy-MM-dd') : undefined;
-
-    const updateDateFilter = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM>) => {
-        updateAdvancedFilters(values);
-        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
-    };
-
-    return (
-        <ScreenWrapper
-            testID={SearchDateFilterBase.displayName}
-            shouldShowOfflineIndicatorInWideScreen
-            offlineIndicatorStyle={styles.mtAuto}
-            includeSafeAreaPaddingBottom
-            shouldEnableMaxHeight
-        >
-            <HeaderWithBackButton
-                title={translate(titleKey)}
-                onBackButtonPress={() => {
-                    Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
-                }}
-            />
-            <FormProvider
-                style={[styles.flex1, styles.ph5]}
-                formID={ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}
-                onSubmit={updateDateFilter}
-                submitButtonText={translate('common.save')}
-                enabledWhenOffline
-            >
-                <InputWrapper
-                    InputComponent={DatePicker}
-                    inputID={`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`}
-                    label={translate('search.filters.date.after')}
-                    defaultValue={dateAfter}
-                    maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
-                    minDate={CONST.CALENDAR_PICKER.MIN_DATE}
-                />
-                <InputWrapper
-                    InputComponent={DatePicker}
-                    inputID={`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`}
-                    label={translate('search.filters.date.before')}
-                    defaultValue={dateBefore}
-                    maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
-                    minDate={CONST.CALENDAR_PICKER.MIN_DATE}
-                />
-            </FormProvider>
-        </ScreenWrapper>
-    );
-}
-
-SearchDateFilterBase.displayName = 'SearchDateFilterBase';
-
-export default SearchDateFilterBase;
diff --git a/src/components/Search/SearchDateFilterBase/CalendarView.tsx b/src/components/Search/SearchDateFilterBase/CalendarView.tsx
new file mode 100644
index 000000000000..3b6cd0a26393
--- /dev/null
+++ b/src/components/Search/SearchDateFilterBase/CalendarView.tsx
@@ -0,0 +1,80 @@
+import React, {useState} from 'react';
+import Button from '@components/Button';
+import CalendarPicker from '@components/DatePicker/CalendarPicker';
+import FixedFooter from '@components/FixedFooter';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
+
+type CalendarViewProps = {
+    view: SearchDateModifier;
+    value: string | null;
+    navigateBack: () => void;
+    setValue: (key: SearchDateModifier, value: string | null) => void;
+};
+
+function SearchDateFilterBaseCalendarView({view, value, navigateBack, setValue}: CalendarViewProps) {
+    const initialValue = value === CONST.SEARCH.NEVER ? null : value;
+
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [localDateValue, setLocalDateValue] = useState(initialValue);
+
+    const lowerDateModifier = view.toLowerCase() as SearchDateModifierLower;
+
+    const resetChanges = () => {
+        setValue(view, null);
+        navigateBack();
+    };
+
+    const applyChanges = () => {
+        setValue(view, localDateValue);
+        navigateBack();
+    };
+
+    return (
+        <ScreenWrapper
+            testID={SearchDateFilterBaseCalendarView.displayName}
+            shouldShowOfflineIndicatorInWideScreen
+            offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate(`common.${lowerDateModifier}`)}
+                onBackButtonPress={navigateBack}
+            />
+
+            <CalendarPicker
+                value={localDateValue ?? undefined}
+                onSelected={setLocalDateValue}
+                maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                minDate={CONST.CALENDAR_PICKER.MIN_DATE}
+            />
+
+            <FixedFooter style={styles.mtAuto}>
+                <Button
+                    large
+                    style={[styles.mt4]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                />
+                <Button
+                    large
+                    success
+                    pressOnEnter
+                    style={[styles.mt4]}
+                    text={translate('common.save')}
+                    onPress={applyChanges}
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
+}
+
+SearchDateFilterBaseCalendarView.displayName = 'SearchDateFilterBaseCalendarView';
+
+export default SearchDateFilterBaseCalendarView;
diff --git a/src/components/Search/SearchDateFilterBase/RootView.tsx b/src/components/Search/SearchDateFilterBase/RootView.tsx
new file mode 100644
index 000000000000..7c6a63599600
--- /dev/null
+++ b/src/components/Search/SearchDateFilterBase/RootView.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import FixedFooter from '@components/FixedFooter';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItem from '@components/MenuItem';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import type {SearchDateModifier} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type {SearchDateFilterBaseProps, SearchFiltersDatePageValues} from '.';
+
+type RootViewProps = Pick<SearchDateFilterBaseProps, 'titleKey'> & {
+    value: SearchFiltersDatePageValues;
+    applyChanges: () => void;
+    resetChanges: () => void;
+    setView: (view: SearchDateModifier) => void;
+};
+
+function SearchDateFilterBaseRootView({titleKey, value, applyChanges, resetChanges, setView}: RootViewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const unformattedDateOn = value?.[CONST.SEARCH.DATE_MODIFIERS.ON];
+    const unformattedDateAfter = value?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+    const unformattedDateBefore = value?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+    const dateOn = unformattedDateOn ?? undefined;
+    const dateAfter = unformattedDateAfter ?? undefined;
+    const dateBefore = unformattedDateBefore ?? undefined;
+
+    return (
+        <ScreenWrapper
+            testID={SearchDateFilterBaseRootView.displayName}
+            shouldShowOfflineIndicatorInWideScreen
+            offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate(titleKey)}
+                onBackButtonPress={() => {
+                    Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+                }}
+            />
+            <View>
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={translate('common.on')}
+                    description={dateOn}
+                    onPress={() => setView(CONST.SEARCH.DATE_MODIFIERS.ON)}
+                />
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={translate('common.after')}
+                    description={dateAfter}
+                    onPress={() => setView(CONST.SEARCH.DATE_MODIFIERS.AFTER)}
+                />
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={translate('common.before')}
+                    description={dateBefore}
+                    onPress={() => setView(CONST.SEARCH.DATE_MODIFIERS.BEFORE)}
+                />
+            </View>
+
+            <FixedFooter style={styles.mtAuto}>
+                <Button
+                    large
+                    style={[styles.mt4]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                />
+                <Button
+                    large
+                    success
+                    pressOnEnter
+                    style={[styles.mt4]}
+                    text={translate('common.save')}
+                    onPress={applyChanges}
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
+}
+
+SearchDateFilterBaseRootView.displayName = 'SearchDateFilterBaseRootView';
+
+export default SearchDateFilterBaseRootView;
diff --git a/src/components/Search/SearchDateFilterBase/index.tsx b/src/components/Search/SearchDateFilterBase/index.tsx
new file mode 100644
index 000000000000..49216c5a4f72
--- /dev/null
+++ b/src/components/Search/SearchDateFilterBase/index.tsx
@@ -0,0 +1,106 @@
+import React, {useCallback, useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import type {SearchDateFilterKeys} from '@components/Search/types';
+import {updateAdvancedFilters} from '@libs/actions/Search';
+import Navigation from '@libs/Navigation/Navigation';
+import type {SearchDateModifier} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import SearchDateFilterBaseCalendarView from './CalendarView';
+import SearchDateFilterBaseRootView from './RootView';
+
+type SearchFiltersDatePageValues = Record<SearchDateModifier, string | null>;
+
+type SearchDateFilterBaseProps = {
+    /** Key used for the date filter */
+    dateKey: SearchDateFilterKeys;
+
+    /** The translation key for the page title */
+    titleKey: TranslationPaths;
+};
+
+function SearchDateFilterBase({dateKey, titleKey}: SearchDateFilterBaseProps) {
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
+
+    const [view, setView] = useState<SearchDateModifier | null>(null);
+    const [localDateValues, setLocalDateValues] = useState<SearchFiltersDatePageValues>({
+        After: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`] ?? null,
+        Before: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`] ?? null,
+        On: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}`] ?? null,
+    });
+
+    const setDateValue = (key: SearchDateModifier, dateValue: string | null) => {
+        setLocalDateValues((currentValue) => {
+            // If we are setting the 'on' to 'never', reset the other dates
+            if (key === CONST.SEARCH.DATE_MODIFIERS.ON && dateValue === CONST.SEARCH.NEVER) {
+                return {
+                    [CONST.SEARCH.DATE_MODIFIERS.ON]: dateValue,
+                    [CONST.SEARCH.DATE_MODIFIERS.AFTER]: null,
+                    [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: null,
+                };
+            }
+
+            // If we are setting any other value while 'on' is set to 'never', reset 'on' to null
+            if (key !== CONST.SEARCH.DATE_MODIFIERS.ON && currentValue?.[CONST.SEARCH.DATE_MODIFIERS.ON] === CONST.SEARCH.NEVER) {
+                return {
+                    ...currentValue,
+                    [key]: dateValue,
+                    [CONST.SEARCH.DATE_MODIFIERS.ON]: null,
+                };
+            }
+
+            return {
+                ...currentValue,
+                [key]: dateValue,
+            };
+        });
+    };
+
+    const navigateToRootView = useCallback(() => {
+        setView(null);
+    }, []);
+
+    const resetChanges = useCallback(() => {
+        // Reset each field back to null
+        setLocalDateValues((prev) => {
+            return Object.fromEntries(Object.entries(prev).map(([key]) => [key, null])) as SearchFiltersDatePageValues;
+        });
+    }, []);
+
+    const applyChanges = useCallback(() => {
+        updateAdvancedFilters({
+            [`${dateKey}On`]: localDateValues?.[CONST.SEARCH.DATE_MODIFIERS.ON],
+            [`${dateKey}After`]: localDateValues?.[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+            [`${dateKey}Before`]: localDateValues?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+        });
+        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+    }, [dateKey, localDateValues]);
+
+    if (!view) {
+        return (
+            <SearchDateFilterBaseRootView
+                titleKey={titleKey}
+                value={localDateValues}
+                setView={setView}
+                applyChanges={applyChanges}
+                resetChanges={resetChanges}
+            />
+        );
+    }
+
+    return (
+        <SearchDateFilterBaseCalendarView
+            view={view}
+            value={localDateValues[view]}
+            setValue={setDateValue}
+            navigateBack={navigateToRootView}
+        />
+    );
+}
+
+SearchDateFilterBase.displayName = 'SearchDateFilterBase';
+
+export type {SearchFiltersDatePageValues, SearchDateFilterBaseProps};
+export default SearchDateFilterBase;

From fdaad5f4050aea913f02e1d1f14997a69e772b17 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Mon, 16 Jun 2025 16:58:33 +0300
Subject: [PATCH 03/16] fix: styles

---
 .../SearchFiltersParticipantsSelector.tsx     | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/components/Search/SearchFiltersParticipantsSelector.tsx b/src/components/Search/SearchFiltersParticipantsSelector.tsx
index 3d7eba3d2fde..4c256bd18fd9 100644
--- a/src/components/Search/SearchFiltersParticipantsSelector.tsx
+++ b/src/components/Search/SearchFiltersParticipantsSelector.tsx
@@ -9,13 +9,13 @@ import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import * as OptionsListUtils from '@libs/OptionsListUtils';
-import type {Option} from '@libs/OptionsListUtils';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {filterAndOrderOptions, formatSectionsFromSearchTerm, getValidOptions} from '@libs/OptionsListUtils';
+import type {Option, Section} from '@libs/OptionsListUtils';
 import type {OptionData} from '@libs/ReportUtils';
-import * as ReportUtils from '@libs/ReportUtils';
+import {getDisplayNameForParticipant} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
-import * as Report from '@userActions/Report';
+import {searchInServer} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -29,6 +29,7 @@ const defaultListOptions = {
 };
 
 function getSelectedOptionData(option: Option): OptionData {
+    // eslint-disable-next-line rulesdir/no-default-id-values
     return {...option, selected: true, reportID: option.reportID ?? '-1'};
 }
 
@@ -46,7 +47,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         shouldInitialize: didScreenTransitionEnd,
     });
 
-    const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
+    const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {canBeMissing: false, initWithStoredValues: false});
     const [selectedOptions, setSelectedOptions] = useState<OptionData[]>([]);
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const cleanSearchTerm = useMemo(() => searchTerm.trim().toLowerCase(), [searchTerm]);
@@ -56,7 +57,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
             return defaultListOptions;
         }
 
-        return OptionsListUtils.getValidOptions(
+        return getValidOptions(
             {
                 reports: options.reports,
                 personalDetails: options.personalDetails,
@@ -69,7 +70,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
     }, [areOptionsInitialized, options.personalDetails, options.reports, selectedOptions]);
 
     const chatOptions = useMemo(() => {
-        return OptionsListUtils.filterAndOrderOptions(defaultOptions, cleanSearchTerm, {
+        return filterAndOrderOptions(defaultOptions, cleanSearchTerm, {
             selectedOptions,
             excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
             maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
@@ -77,24 +78,17 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
     }, [defaultOptions, cleanSearchTerm, selectedOptions]);
 
     const {sections, headerMessage} = useMemo(() => {
-        const newSections: OptionsListUtils.Section[] = [];
+        const newSections: Section[] = [];
         if (!areOptionsInitialized) {
             return {sections: [], headerMessage: undefined};
         }
 
-        const formattedResults = OptionsListUtils.formatSectionsFromSearchTerm(
-            cleanSearchTerm,
-            selectedOptions,
-            chatOptions.recentReports,
-            chatOptions.personalDetails,
-            personalDetails,
-            true,
-        );
+        const formattedResults = formatSectionsFromSearchTerm(cleanSearchTerm, selectedOptions, chatOptions.recentReports, chatOptions.personalDetails, personalDetails, true);
 
         const selectedCurrentUser = formattedResults.section.data.find((option) => option.accountID === chatOptions.currentUserOption?.accountID);
 
         if (chatOptions.currentUserOption) {
-            const formattedName = ReportUtils.getDisplayNameForParticipant({
+            const formattedName = getDisplayNameForParticipant({
                 accountID: chatOptions.currentUserOption.accountID,
                 shouldAddCurrentUserPostfix: true,
                 personalDetailsData: personalDetails,
@@ -165,7 +159,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
     }, [initialAccountIDs, personalDetails]);
 
     useEffect(() => {
-        Report.searchInServer(debouncedSearchTerm.trim());
+        searchInServer(debouncedSearchTerm.trim());
     }, [debouncedSearchTerm]);
 
     const handleParticipantSelection = useCallback(
@@ -224,7 +218,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
             textInputValue={searchTerm}
             footerContent={footerContent}
             showScrollIndicator
-            shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+            shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
             onChangeText={(value) => {
                 setSearchTerm(value);
             }}

From 56bc3b11dc0bcb8107be59b9cc13af9d4b821b9f Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Tue, 17 Jun 2025 15:49:55 +0300
Subject: [PATCH 04/16] feat: implement new design patterns in the Billable &
 Reimbursable search filters

---
 .../Search/SearchBooleanFilterBase.tsx        | 48 ++++++++++++++-----
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/components/Search/SearchBooleanFilterBase.tsx b/src/components/Search/SearchBooleanFilterBase.tsx
index a648f8f814f1..307fbe1ec0b5 100644
--- a/src/components/Search/SearchBooleanFilterBase.tsx
+++ b/src/components/Search/SearchBooleanFilterBase.tsx
@@ -1,11 +1,13 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import Button from '@components/Button';
+import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/SingleSelectListItem';
 import type {ListItem} from '@components/SelectionList/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -36,9 +38,9 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
     const booleanValues = Object.values(CONST.SEARCH.BOOLEAN);
     const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
 
-    const selectedItem = useMemo(() => {
+    const [selectedItem, setSelectedItem] = useState(() => {
         return booleanValues.find((value) => searchAdvancedFiltersForm?.[booleanKey] === value) ?? null;
-    }, [booleanKey, searchAdvancedFiltersForm, booleanValues]);
+    });
 
     const items = useMemo(() => {
         return booleanValues.map((value) => ({
@@ -49,15 +51,19 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
         }));
     }, [selectedItem, translate, booleanValues]);
 
-    const updateFilter = useCallback(
-        (selectedFilter: BooleanFilterItem) => {
-            const newValue = selectedFilter.isSelected ? null : selectedFilter.value;
+    const updateFilter = useCallback((selectedFilter: BooleanFilterItem) => {
+        const newValue = selectedFilter.isSelected ? null : selectedFilter.value;
+        setSelectedItem(newValue);
+    }, []);
 
-            updateAdvancedFilters({[booleanKey]: newValue});
-            Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
-        },
-        [booleanKey],
-    );
+    const resetChanges = useCallback(() => {
+        setSelectedItem(null);
+    }, []);
+
+    const applyChanges = useCallback(() => {
+        updateAdvancedFilters({[booleanKey]: selectedItem});
+        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+    }, [booleanKey, selectedItem]);
 
     return (
         <ScreenWrapper
@@ -77,11 +83,27 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
                 <SelectionList
                     shouldSingleExecuteRowSelect
                     sections={[{data: items}]}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     initiallyFocusedOptionKey={selectedItem}
                     onSelectRow={updateFilter}
                 />
             </View>
+            <FixedFooter style={styles.mtAuto}>
+                <Button
+                    large
+                    style={[styles.mt4]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                />
+                <Button
+                    large
+                    success
+                    pressOnEnter
+                    style={[styles.mt4]}
+                    text={translate('common.save')}
+                    onPress={applyChanges}
+                />
+            </FixedFooter>
         </ScreenWrapper>
     );
 }

From 41f2ba7198ca085042261fa50ab33789eda16342 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Tue, 17 Jun 2025 15:57:51 +0300
Subject: [PATCH 05/16] feat: implement new design patterns in Card, Category,
 Currency, Expense type, and Tag search filters

---
 .../Search/SearchMultipleSelectionPicker.tsx  | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/Search/SearchMultipleSelectionPicker.tsx b/src/components/Search/SearchMultipleSelectionPicker.tsx
index 12cb775ca6be..978cac87bbae 100644
--- a/src/components/Search/SearchMultipleSelectionPicker.tsx
+++ b/src/components/Search/SearchMultipleSelectionPicker.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import Button from '@components/Button';
 import SelectionList from '@components/SelectionList';
-import SelectableListItem from '@components/SelectionList/SelectableListItem';
+import MultiSelectListItem from '@components/SelectionList/MultiSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -87,23 +87,35 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
         [selectedItems],
     );
 
-    const handleConfirmSelection = useCallback(() => {
+    const resetChanges = useCallback(() => {
+        setSelectedItems([]);
+    }, []);
+
+    const applyChanges = useCallback(() => {
         onSaveSelection(selectedItems.map((item) => item.value).flat());
         Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
     }, [onSaveSelection, selectedItems]);
 
     const footerContent = useMemo(
         () => (
-            <Button
-                success
-                style={[styles.mt4]}
-                text={translate('common.save')}
-                pressOnEnter
-                onPress={handleConfirmSelection}
-                large
-            />
+            <>
+                <Button
+                    large
+                    style={[styles.mt4]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                />
+                <Button
+                    success
+                    large
+                    pressOnEnter
+                    style={[styles.mt4]}
+                    text={translate('common.save')}
+                    onPress={applyChanges}
+                />
+            </>
         ),
-        [translate, handleConfirmSelection, styles.mt4],
+        [styles.mt4, translate, resetChanges, applyChanges],
     );
     return (
         <SelectionList
@@ -118,7 +130,7 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
             showLoadingPlaceholder={!noResultsFound}
             shouldShowTooltips
             canSelectMultiple
-            ListItem={SelectableListItem}
+            ListItem={MultiSelectListItem}
         />
     );
 }

From 91dc5eb7134d96d55363d99c1208cb34a19e22ca Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Tue, 17 Jun 2025 16:06:12 +0300
Subject: [PATCH 06/16] fix: style

---
 src/components/Search/SearchBooleanFilterBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchBooleanFilterBase.tsx b/src/components/Search/SearchBooleanFilterBase.tsx
index 307fbe1ec0b5..a8cc84614da8 100644
--- a/src/components/Search/SearchBooleanFilterBase.tsx
+++ b/src/components/Search/SearchBooleanFilterBase.tsx
@@ -36,7 +36,7 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
     const {translate} = useLocalize();
 
     const booleanValues = Object.values(CONST.SEARCH.BOOLEAN);
-    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
 
     const [selectedItem, setSelectedItem] = useState(() => {
         return booleanValues.find((value) => searchAdvancedFiltersForm?.[booleanKey] === value) ?? null;

From 19b2e0cbf35886fa14dedb129e47eb23ac970e03 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Tue, 17 Jun 2025 16:45:03 +0300
Subject: [PATCH 07/16] refactor: simplify date value assignment in
 SearchDateFilterBaseRootView

---
 .../Search/SearchDateFilterBase/RootView.tsx           | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/Search/SearchDateFilterBase/RootView.tsx b/src/components/Search/SearchDateFilterBase/RootView.tsx
index 7c6a63599600..cd7a1a007603 100644
--- a/src/components/Search/SearchDateFilterBase/RootView.tsx
+++ b/src/components/Search/SearchDateFilterBase/RootView.tsx
@@ -24,13 +24,9 @@ function SearchDateFilterBaseRootView({titleKey, value, applyChanges, resetChang
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const unformattedDateOn = value?.[CONST.SEARCH.DATE_MODIFIERS.ON];
-    const unformattedDateAfter = value?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-    const unformattedDateBefore = value?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-
-    const dateOn = unformattedDateOn ?? undefined;
-    const dateAfter = unformattedDateAfter ?? undefined;
-    const dateBefore = unformattedDateBefore ?? undefined;
+    const dateOn = value?.[CONST.SEARCH.DATE_MODIFIERS.ON] ?? undefined;
+    const dateAfter = value?.[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? undefined;
+    const dateBefore = value?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? undefined;
 
     return (
         <ScreenWrapper

From 79ec0aaba11ba105ca64340c9147758398320ccd Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Tue, 17 Jun 2025 17:07:04 +0300
Subject: [PATCH 08/16] refactor: replace footer buttons with reusable
 SearchFilterPageFooterButtons component across search filters

---
 .../Search/SearchBooleanFilterBase.tsx        | 23 +++--------
 .../SearchDateFilterBase/CalendarView.tsx     | 23 +++--------
 .../Search/SearchDateFilterBase/RootView.tsx  | 23 +++--------
 .../Search/SearchFilterPageFooterButtons.tsx  | 39 +++++++++++++++++++
 .../SearchFiltersParticipantsSelector.tsx     | 27 ++++---------
 .../Search/SearchMultipleSelectionPicker.tsx  | 26 +++----------
 6 files changed, 68 insertions(+), 93 deletions(-)
 create mode 100644 src/components/Search/SearchFilterPageFooterButtons.tsx

diff --git a/src/components/Search/SearchBooleanFilterBase.tsx b/src/components/Search/SearchBooleanFilterBase.tsx
index a8cc84614da8..6ff5503adb22 100644
--- a/src/components/Search/SearchBooleanFilterBase.tsx
+++ b/src/components/Search/SearchBooleanFilterBase.tsx
@@ -2,8 +2,6 @@ import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
-import Button from '@components/Button';
-import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
@@ -17,6 +15,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SearchFilterPageFooterButtons from './SearchFilterPageFooterButtons';
 import type {SearchBooleanFilterKeys} from './types';
 
 type BooleanFilterItem = ListItem & {
@@ -88,22 +87,10 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
                     onSelectRow={updateFilter}
                 />
             </View>
-            <FixedFooter style={styles.mtAuto}>
-                <Button
-                    large
-                    style={[styles.mt4]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                />
-                <Button
-                    large
-                    success
-                    pressOnEnter
-                    style={[styles.mt4]}
-                    text={translate('common.save')}
-                    onPress={applyChanges}
-                />
-            </FixedFooter>
+            <SearchFilterPageFooterButtons
+                applyChanges={applyChanges}
+                resetChanges={resetChanges}
+            />
         </ScreenWrapper>
     );
 }
diff --git a/src/components/Search/SearchDateFilterBase/CalendarView.tsx b/src/components/Search/SearchDateFilterBase/CalendarView.tsx
index 3b6cd0a26393..4ac8be1cf848 100644
--- a/src/components/Search/SearchDateFilterBase/CalendarView.tsx
+++ b/src/components/Search/SearchDateFilterBase/CalendarView.tsx
@@ -1,9 +1,8 @@
 import React, {useState} from 'react';
-import Button from '@components/Button';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
-import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
@@ -55,22 +54,10 @@ function SearchDateFilterBaseCalendarView({view, value, navigateBack, setValue}:
                 minDate={CONST.CALENDAR_PICKER.MIN_DATE}
             />
 
-            <FixedFooter style={styles.mtAuto}>
-                <Button
-                    large
-                    style={[styles.mt4]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                />
-                <Button
-                    large
-                    success
-                    pressOnEnter
-                    style={[styles.mt4]}
-                    text={translate('common.save')}
-                    onPress={applyChanges}
-                />
-            </FixedFooter>
+            <SearchFilterPageFooterButtons
+                applyChanges={applyChanges}
+                resetChanges={resetChanges}
+            />
         </ScreenWrapper>
     );
 }
diff --git a/src/components/Search/SearchDateFilterBase/RootView.tsx b/src/components/Search/SearchDateFilterBase/RootView.tsx
index cd7a1a007603..db4ecbb3e37b 100644
--- a/src/components/Search/SearchDateFilterBase/RootView.tsx
+++ b/src/components/Search/SearchDateFilterBase/RootView.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
-import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
+import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -66,22 +65,10 @@ function SearchDateFilterBaseRootView({titleKey, value, applyChanges, resetChang
                 />
             </View>
 
-            <FixedFooter style={styles.mtAuto}>
-                <Button
-                    large
-                    style={[styles.mt4]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                />
-                <Button
-                    large
-                    success
-                    pressOnEnter
-                    style={[styles.mt4]}
-                    text={translate('common.save')}
-                    onPress={applyChanges}
-                />
-            </FixedFooter>
+            <SearchFilterPageFooterButtons
+                applyChanges={applyChanges}
+                resetChanges={resetChanges}
+            />
         </ScreenWrapper>
     );
 }
diff --git a/src/components/Search/SearchFilterPageFooterButtons.tsx b/src/components/Search/SearchFilterPageFooterButtons.tsx
new file mode 100644
index 000000000000..447fdfac26c0
--- /dev/null
+++ b/src/components/Search/SearchFilterPageFooterButtons.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '@components/Button';
+import FixedFooter from '@components/FixedFooter';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type SearchFilterPageFooterButtonsProps = {
+    /** Function to reset changes made in the filter */
+    resetChanges: () => void;
+
+    /** Function to apply changes made in the filter */
+    applyChanges: () => void;
+};
+
+function SearchFilterPageFooterButtons({resetChanges, applyChanges}: SearchFilterPageFooterButtonsProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <FixedFooter style={styles.mtAuto}>
+            <Button
+                large
+                style={[styles.mt4]}
+                text={translate('common.reset')}
+                onPress={resetChanges}
+            />
+            <Button
+                large
+                success
+                pressOnEnter
+                style={[styles.mt4]}
+                text={translate('common.save')}
+                onPress={applyChanges}
+            />
+        </FixedFooter>
+    );
+}
+
+export default SearchFilterPageFooterButtons;
diff --git a/src/components/Search/SearchFiltersParticipantsSelector.tsx b/src/components/Search/SearchFiltersParticipantsSelector.tsx
index 4c256bd18fd9..e37dea53cba0 100644
--- a/src/components/Search/SearchFiltersParticipantsSelector.tsx
+++ b/src/components/Search/SearchFiltersParticipantsSelector.tsx
@@ -1,6 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
 import SelectionList from '@components/SelectionList';
@@ -8,7 +7,6 @@ import UserSelectionListItem from '@components/SelectionList/Search/UserSelectio
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {filterAndOrderOptions, formatSectionsFromSearchTerm, getValidOptions} from '@libs/OptionsListUtils';
 import type {Option, Section} from '@libs/OptionsListUtils';
@@ -19,6 +17,7 @@ import {searchInServer} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SearchFilterPageFooterButtons from './SearchFilterPageFooterButtons';
 
 const defaultListOptions = {
     userToInvite: null,
@@ -39,7 +38,6 @@ type SearchFiltersParticipantsSelectorProps = {
 };
 
 function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}: SearchFiltersParticipantsSelectorProps) {
-    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const personalDetails = usePersonalDetails();
     const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
@@ -186,23 +184,14 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         [selectedOptions],
     );
 
-    const footerContent = (
-        <>
-            <Button
-                large
-                style={[styles.mt4]}
-                text={translate('common.reset')}
-                onPress={resetChanges}
+    const footerContent = useMemo(
+        () => (
+            <SearchFilterPageFooterButtons
+                applyChanges={applyChanges}
+                resetChanges={resetChanges}
             />
-            <Button
-                large
-                success
-                pressOnEnter
-                style={[styles.mt4]}
-                text={translate('common.save')}
-                onPress={applyChanges}
-            />
-        </>
+        ),
+        [applyChanges, resetChanges],
     );
 
     const isLoadingNewOptions = !!isSearchingForReports;
diff --git a/src/components/Search/SearchMultipleSelectionPicker.tsx b/src/components/Search/SearchMultipleSelectionPicker.tsx
index 978cac87bbae..0dcb43baf874 100644
--- a/src/components/Search/SearchMultipleSelectionPicker.tsx
+++ b/src/components/Search/SearchMultipleSelectionPicker.tsx
@@ -1,14 +1,13 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import Button from '@components/Button';
 import SelectionList from '@components/SelectionList';
 import MultiSelectListItem from '@components/SelectionList/MultiSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {OptionData} from '@libs/ReportUtils';
 import {sortOptionsWithEmptyValue} from '@libs/SearchQueryUtils';
 import ROUTES from '@src/ROUTES';
+import SearchFilterPageFooterButtons from './SearchFilterPageFooterButtons';
 
 type SearchMultipleSelectionPickerItem = {
     name: string;
@@ -25,7 +24,6 @@ type SearchMultipleSelectionPickerProps = {
 
 function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTitle, onSaveSelection, shouldShowTextInput = true}: SearchMultipleSelectionPickerProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const [selectedItems, setSelectedItems] = useState<SearchMultipleSelectionPickerItem[]>(initiallySelectedItems ?? []);
@@ -98,24 +96,12 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
 
     const footerContent = useMemo(
         () => (
-            <>
-                <Button
-                    large
-                    style={[styles.mt4]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                />
-                <Button
-                    success
-                    large
-                    pressOnEnter
-                    style={[styles.mt4]}
-                    text={translate('common.save')}
-                    onPress={applyChanges}
-                />
-            </>
+            <SearchFilterPageFooterButtons
+                applyChanges={applyChanges}
+                resetChanges={resetChanges}
+            />
         ),
-        [styles.mt4, translate, resetChanges, applyChanges],
+        [resetChanges, applyChanges],
     );
     return (
         <SelectionList

From e2c82c0e0242568d7a17fda5dfb84ed8635506ee Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Wed, 18 Jun 2025 17:18:56 +0300
Subject: [PATCH 09/16] fix: enable safe area padding in
 SearchBooleanFilterBase

---
 src/components/Search/SearchBooleanFilterBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchBooleanFilterBase.tsx b/src/components/Search/SearchBooleanFilterBase.tsx
index 6ff5503adb22..c984c9665b47 100644
--- a/src/components/Search/SearchBooleanFilterBase.tsx
+++ b/src/components/Search/SearchBooleanFilterBase.tsx
@@ -69,7 +69,7 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
             testID={SearchBooleanFilterBase.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
-            includeSafeAreaPaddingBottom={false}
+            includeSafeAreaPaddingBottom
             shouldEnableMaxHeight
         >
             <HeaderWithBackButton

From 0b62612d7d3d95b64f1b4ab58642a94982b9918a Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Thu, 19 Jun 2025 15:53:12 +0300
Subject: [PATCH 10/16] refactor: remove FixedFooter usage from
 SearchFilterPageFooterButtons

---
 src/components/Search/SearchBooleanFilterBase.tsx     | 11 +++++++----
 .../Search/SearchDateFilterBase/CalendarView.tsx      | 11 +++++++----
 .../Search/SearchDateFilterBase/RootView.tsx          | 11 +++++++----
 .../Search/SearchFilterPageFooterButtons.tsx          |  6 +++---
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/Search/SearchBooleanFilterBase.tsx b/src/components/Search/SearchBooleanFilterBase.tsx
index c984c9665b47..f51beb6d3592 100644
--- a/src/components/Search/SearchBooleanFilterBase.tsx
+++ b/src/components/Search/SearchBooleanFilterBase.tsx
@@ -2,6 +2,7 @@ import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
@@ -87,10 +88,12 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
                     onSelectRow={updateFilter}
                 />
             </View>
-            <SearchFilterPageFooterButtons
-                applyChanges={applyChanges}
-                resetChanges={resetChanges}
-            />
+            <FixedFooter style={styles.mtAuto}>
+                <SearchFilterPageFooterButtons
+                    applyChanges={applyChanges}
+                    resetChanges={resetChanges}
+                />
+            </FixedFooter>
         </ScreenWrapper>
     );
 }
diff --git a/src/components/Search/SearchDateFilterBase/CalendarView.tsx b/src/components/Search/SearchDateFilterBase/CalendarView.tsx
index 4ac8be1cf848..16beaaa9c753 100644
--- a/src/components/Search/SearchDateFilterBase/CalendarView.tsx
+++ b/src/components/Search/SearchDateFilterBase/CalendarView.tsx
@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
+import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons';
@@ -54,10 +55,12 @@ function SearchDateFilterBaseCalendarView({view, value, navigateBack, setValue}:
                 minDate={CONST.CALENDAR_PICKER.MIN_DATE}
             />
 
-            <SearchFilterPageFooterButtons
-                applyChanges={applyChanges}
-                resetChanges={resetChanges}
-            />
+            <FixedFooter style={styles.mtAuto}>
+                <SearchFilterPageFooterButtons
+                    applyChanges={applyChanges}
+                    resetChanges={resetChanges}
+                />
+            </FixedFooter>
         </ScreenWrapper>
     );
 }
diff --git a/src/components/Search/SearchDateFilterBase/RootView.tsx b/src/components/Search/SearchDateFilterBase/RootView.tsx
index db4ecbb3e37b..ca6271cd6fd1 100644
--- a/src/components/Search/SearchDateFilterBase/RootView.tsx
+++ b/src/components/Search/SearchDateFilterBase/RootView.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -65,10 +66,12 @@ function SearchDateFilterBaseRootView({titleKey, value, applyChanges, resetChang
                 />
             </View>
 
-            <SearchFilterPageFooterButtons
-                applyChanges={applyChanges}
-                resetChanges={resetChanges}
-            />
+            <FixedFooter style={styles.mtAuto}>
+                <SearchFilterPageFooterButtons
+                    applyChanges={applyChanges}
+                    resetChanges={resetChanges}
+                />
+            </FixedFooter>
         </ScreenWrapper>
     );
 }
diff --git a/src/components/Search/SearchFilterPageFooterButtons.tsx b/src/components/Search/SearchFilterPageFooterButtons.tsx
index 447fdfac26c0..78aeed8d42ab 100644
--- a/src/components/Search/SearchFilterPageFooterButtons.tsx
+++ b/src/components/Search/SearchFilterPageFooterButtons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import {View} from 'react-native';
 import Button from '@components/Button';
-import FixedFooter from '@components/FixedFooter';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -17,7 +17,7 @@ function SearchFilterPageFooterButtons({resetChanges, applyChanges}: SearchFilte
     const {translate} = useLocalize();
 
     return (
-        <FixedFooter style={styles.mtAuto}>
+        <View>
             <Button
                 large
                 style={[styles.mt4]}
@@ -32,7 +32,7 @@ function SearchFilterPageFooterButtons({resetChanges, applyChanges}: SearchFilte
                 text={translate('common.save')}
                 onPress={applyChanges}
             />
-        </FixedFooter>
+        </View>
     );
 }
 

From 15a7979724791ccfbc0af25a2c4d3910c51afdf1 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Thu, 19 Jun 2025 23:01:58 +0300
Subject: [PATCH 11/16] fix: trigger checkbox selection on enter key press

---
 src/components/Checkbox.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 0148d564e88c..b581c76dc770 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -75,8 +75,8 @@ function Checkbox(
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
-    const handleSpaceKey = (event?: ReactKeyboardEvent) => {
-        if (event?.code !== 'Space') {
+    const handleSpaceOrEnterKey = (event?: ReactKeyboardEvent) => {
+        if (event?.code !== 'Space' && event?.code !== 'Enter') {
             return;
         }
 
@@ -105,7 +105,7 @@ function Checkbox(
             }}
             ref={ref}
             style={[StyleUtils.getCheckboxPressableStyle(containerBorderRadius + 2), style]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
-            onKeyDown={handleSpaceKey}
+            onKeyDown={handleSpaceOrEnterKey}
             role={CONST.ROLE.CHECKBOX}
             /*  true  → checked
                 false → unchecked

From 5659ece1bc75ff00ec8b8aeac6e9d066d0e2a5ea Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Thu, 19 Jun 2025 23:03:11 +0300
Subject: [PATCH 12/16] fix: add margin to checkbox container  style for better
 focus outline

---
 src/styles/utils/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index b2f0ba4cdd67..289639f7a6d8 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1434,6 +1434,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius,
+        margin: 2,
     }),
 
     /**

From 626b193cdd7ee6be00ec093522e7bb83babea622 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Fri, 20 Jun 2025 13:08:40 +0300
Subject: [PATCH 13/16] fix: update Checkbox prop from containerStyle to
 containerBorderRadius for consistency

---
 src/components/SelectionList/SingleSelectListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/SingleSelectListItem.tsx b/src/components/SelectionList/SingleSelectListItem.tsx
index 1202a96a6215..a3b9f6a930aa 100644
--- a/src/components/SelectionList/SingleSelectListItem.tsx
+++ b/src/components/SelectionList/SingleSelectListItem.tsx
@@ -30,7 +30,7 @@ function SingleSelectListItem<TItem extends ListItem>({
     const radioCheckboxComponent = useCallback(() => {
         return (
             <Checkbox
-                containerStyle={{borderRadius: 999}}
+                containerBorderRadius={999}
                 accessibilityLabel="SingleSelectListItem"
                 isChecked={isSelected}
                 onPress={() => onSelectRow(item)}

From d500a60f03dc0115dab9f6dddb903ebe01750374 Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Fri, 20 Jun 2025 13:46:22 +0300
Subject: [PATCH 14/16] fix: add shouldSelectOnPressEnter prop to control
 checkbox selection on Enter key press

---
 src/components/Checkbox.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index b581c76dc770..507fd8859c5a 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -50,6 +50,9 @@ type CheckboxProps = Partial<ChildrenProps> & {
 
     /** stop propagation of the mouse down event */
     shouldStopMouseDownPropagation?: boolean;
+
+    /** Whether the checkbox should be selected when pressing Enter key */
+    shouldSelectOnPressEnter?: boolean;
 };
 
 function Checkbox(
@@ -68,6 +71,7 @@ function Checkbox(
         onPress,
         accessibilityLabel,
         shouldStopMouseDownPropagation,
+        shouldSelectOnPressEnter = true,
     }: CheckboxProps,
     ref: ForwardedRef<View>,
 ) {
@@ -80,6 +84,12 @@ function Checkbox(
             return;
         }
 
+        if (event?.code === 'Enter' && !shouldSelectOnPressEnter) {
+            // If the checkbox should not be selected on Enter key press, we do not want to
+            // toggle it, so we return early.
+            return;
+        }
+
         onPress();
     };
 

From b1dc60448624722d4bcfb1f5c062ae6339abf4cd Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Fri, 20 Jun 2025 14:33:21 +0300
Subject: [PATCH 15/16] fix: disable shouldSelectOnPressEnter prop by default
 in Checkbox component

---
 src/components/Checkbox.tsx                           | 2 +-
 src/components/SelectionList/MultiSelectListItem.tsx  | 1 +
 src/components/SelectionList/SingleSelectListItem.tsx | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 507fd8859c5a..2f105594cf98 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -71,7 +71,7 @@ function Checkbox(
         onPress,
         accessibilityLabel,
         shouldStopMouseDownPropagation,
-        shouldSelectOnPressEnter = true,
+        shouldSelectOnPressEnter,
     }: CheckboxProps,
     ref: ForwardedRef<View>,
 ) {
diff --git a/src/components/SelectionList/MultiSelectListItem.tsx b/src/components/SelectionList/MultiSelectListItem.tsx
index 8558fc97542a..9f671f466130 100644
--- a/src/components/SelectionList/MultiSelectListItem.tsx
+++ b/src/components/SelectionList/MultiSelectListItem.tsx
@@ -30,6 +30,7 @@ function MultiSelectListItem<TItem extends ListItem>({
     const checkboxComponent = useCallback(() => {
         return (
             <Checkbox
+                shouldSelectOnPressEnter
                 isChecked={isSelected}
                 accessibilityLabel={item.text ?? ''}
                 onPress={() => onSelectRow(item)}
diff --git a/src/components/SelectionList/SingleSelectListItem.tsx b/src/components/SelectionList/SingleSelectListItem.tsx
index a3b9f6a930aa..ef199924a14e 100644
--- a/src/components/SelectionList/SingleSelectListItem.tsx
+++ b/src/components/SelectionList/SingleSelectListItem.tsx
@@ -30,6 +30,7 @@ function SingleSelectListItem<TItem extends ListItem>({
     const radioCheckboxComponent = useCallback(() => {
         return (
             <Checkbox
+                shouldSelectOnPressEnter
                 containerBorderRadius={999}
                 accessibilityLabel="SingleSelectListItem"
                 isChecked={isSelected}

From 57a32cb89a38a57f6a5d62a591ba574b487861df Mon Sep 17 00:00:00 2001
From: Sofonias Abathun <sofoniasabathun@gmail.com>
Date: Fri, 20 Jun 2025 14:47:25 +0300
Subject: [PATCH 16/16] fix: inconsistency in focused item styling

---
 src/components/Search/SearchBooleanFilterBase.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Search/SearchBooleanFilterBase.tsx b/src/components/Search/SearchBooleanFilterBase.tsx
index f51beb6d3592..e03c7cc1a311 100644
--- a/src/components/Search/SearchBooleanFilterBase.tsx
+++ b/src/components/Search/SearchBooleanFilterBase.tsx
@@ -84,7 +84,6 @@ function SearchBooleanFilterBase({booleanKey, titleKey}: SearchBooleanFilterBase
                     shouldSingleExecuteRowSelect
                     sections={[{data: items}]}
                     ListItem={SingleSelectListItem}
-                    initiallyFocusedOptionKey={selectedItem}
                     onSelectRow={updateFilter}
                 />
             </View>