From 936b9dc9ac705d8e0ca31cf82e50e05f60f3200d Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 5 Apr 2024 02:29:25 +0500
Subject: [PATCH] add check for selected items

---
 src/components/SelectionList/types.ts |  2 +-
 src/pages/EditReportFieldDropdown.tsx | 24 +++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index e401dd5456b2..62270e4ea64c 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -278,7 +278,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     isKeyboardShown?: boolean;
 
     /** Component to display on the right side of each child */
-    rightHandSideComponent?: ((item: ListItem) => ReactElement<ListItem>) | ReactElement | null;
+    rightHandSideComponent?: ((item: ListItem) => ReactElement<ListItem> | null) | ReactElement | null;
 
     /** Whether to show the loading indicator for new options */
     isLoadingNewOptions?: boolean;
diff --git a/src/pages/EditReportFieldDropdown.tsx b/src/pages/EditReportFieldDropdown.tsx
index f61da2335a70..225051238e2b 100644
--- a/src/pages/EditReportFieldDropdown.tsx
+++ b/src/pages/EditReportFieldDropdown.tsx
@@ -1,10 +1,14 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
+import type {ListItem} from '@components/SelectionList/types';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {RecentlyUsedReportFields} from '@src/types/onyx';
@@ -35,9 +39,26 @@ type EditReportFieldDropdownPageProps = EditReportFieldDropdownPageComponentProp
 
 function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptions, recentlyUsedReportFields}: EditReportFieldDropdownPageProps) {
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+    const theme = useTheme();
     const {translate} = useLocalize();
     const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey] ?? [], [recentlyUsedReportFields, fieldKey]);
 
+    const itemRightSideComponent = useCallback(
+        (item: ListItem) => {
+            if (item.text === fieldValue) {
+                return (
+                    <Icon
+                        src={Expensicons.Checkmark}
+                        fill={theme.iconSuccessFill}
+                    />
+                );
+            }
+
+            return null;
+        },
+        [theme.iconSuccessFill, fieldValue],
+    );
+
     const [sections, headerMessage] = useMemo(() => {
         const validFieldOptions = fieldOptions?.filter((option) => !!option);
 
@@ -90,6 +111,7 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
             headerMessage={headerMessage}
             ListItem={RadioListItem}
             isRowMultilineSupported
+            rightHandSideComponent={itemRightSideComponent}
         />
     );
 }