Merge pull request #37583 from bernhardoj/fix/36683-dont-categorized-…

…report-field-when-searching Don't categorize when searching in report fields selection page
Expensify · Mar 22, 2024 · 408a894 · 408a894
2 parents 1f3e31f + fe25607
commit 408a894
Showing 1 changed file with 72 additions and 25 deletions.
diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx
@@ -37,42 +37,89 @@ type EditReportFieldDropdownPageOnyxProps = {
 
 type EditReportFieldDropdownPageProps = EditReportFieldDropdownPageComponentProps & EditReportFieldDropdownPageOnyxProps;
 
+type ReportFieldDropdownData = {
+    text: string;
+    keyForList: string;
+    searchText: string;
+    tooltipText: string;
+};
+
+type ReportFieldDropdownSectionItem = {
+    data: ReportFieldDropdownData[];
+    shouldShow: boolean;
+    title?: string;
+};
+
 function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, fieldOptions, recentlyUsedReportFields}: EditReportFieldDropdownPageProps) {
     const [searchValue, setSearchValue] = useState('');
     const styles = useThemeStyles();
     const {getSafeAreaMargins} = useStyleUtils();
     const {translate} = useLocalize();
     const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey] ?? [], [recentlyUsedReportFields, fieldKey]);
-    const [headerMessage, setHeaderMessage] = useState('');
-
-    const sections = useMemo(() => {
-        const filteredRecentOptions = recentlyUsedOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase()));
-        const filteredRestOfOptions = fieldOptions.filter((option) => !filteredRecentOptions.includes(option) && option.toLowerCase().includes(searchValue.toLowerCase()));
-        setHeaderMessage(!filteredRecentOptions.length && !filteredRestOfOptions.length ? translate('common.noResultsFound') : '');
-
-        return [
-            {
-                title: translate('common.recents'),
-                shouldShow: filteredRecentOptions.length > 0,
-                data: filteredRecentOptions.map((option) => ({
-                    text: option,
-                    keyForList: option,
-                    searchText: option,
-                    tooltipText: option,
-                })),
-            },
-            {
-                title: translate('common.all'),
-                shouldShow: filteredRestOfOptions.length > 0,
-                data: filteredRestOfOptions.map((option) => ({
+
+    const {sections, headerMessage} = useMemo(() => {
+        let newHeaderMessage = '';
+        const newSections: ReportFieldDropdownSectionItem[] = [];
+
+        if (searchValue) {
+            const filteredOptions = fieldOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase()));
+            newHeaderMessage = !filteredOptions.length ? translate('common.noResultsFound') : '';
+            newSections.push({
+                shouldShow: false,
+                data: filteredOptions.map((option) => ({
                     text: option,
                     keyForList: option,
                     searchText: option,
                     tooltipText: option,
                 })),
-            },
-        ];
-    }, [fieldOptions, recentlyUsedOptions, searchValue, translate]);
+            });
+        } else {
+            const selectedValue = fieldValue;
+            if (selectedValue) {
+                newSections.push({
+                    shouldShow: false,
+                    data: [
+                        {
+                            text: selectedValue,
+                            keyForList: selectedValue,
+                            searchText: selectedValue,
+                            tooltipText: selectedValue,
+                        },
+                    ],
+                });
+            }
+
+            const filteredRecentlyUsedOptions = recentlyUsedOptions.filter((option) => option !== selectedValue);
+            if (filteredRecentlyUsedOptions.length > 0) {
+                newSections.push({
+                    title: translate('common.recents'),
+                    shouldShow: true,
+                    data: filteredRecentlyUsedOptions.map((option) => ({
+                        text: option,
+                        keyForList: option,
+                        searchText: option,
+                        tooltipText: option,
+                    })),
+                });
+            }
+
+            const filteredFieldOptions = fieldOptions.filter((option) => option !== selectedValue);
+            if (filteredFieldOptions.length > 0) {
+                newSections.push({
+                    title: translate('common.all'),
+                    shouldShow: true,
+                    data: filteredFieldOptions.map((option) => ({
+                        text: option,
+                        keyForList: option,
+                        searchText: option,
+                        tooltipText: option,
+                    })),
+                });
+            }
+        }
+
+        return {sections: newSections, headerMessage: newHeaderMessage};
+    }, [fieldValue, fieldOptions, recentlyUsedOptions, searchValue, translate]);
 
     return (
         <ScreenWrapper