Merge pull request #56543 from FitseTLT/fix-add-no-results-found-on-e…

…mpty-company-card-search-list Fix - Company card - Missing "No results found" message when there is no card result
Expensify · Feb 12, 2025 · 532d95d · 532d95d
2 parents 2fbd77a + bf4cef4
commit 532d95d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -96,6 +96,7 @@ function BaseSelectionList<TItem extends ListItem>(
         sectionTitleStyles,
         textInputAutoFocus = true,
         shouldShowTextInputAfterHeader = false,
+        shouldShowHeaderMessageAfterHeader = false,
         includeSafeAreaPaddingBottom = true,
         shouldTextInputInterceptSwipe = false,
         listHeaderContent,
@@ -805,6 +806,14 @@ function BaseSelectionList<TItem extends ListItem>(
         },
     );
 
+    const headerMessageContent = () =>
+        (!isLoadingNewOptions || headerMessage !== translate('common.noResultsFound') || (flattenedSections.allOptions.length === 0 && !showLoadingPlaceholder)) &&
+        !!headerMessage && (
+            <View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
+                <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
+            </View>
+        );
+
     const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
 
     // TODO: test _every_ component that uses SelectionList
@@ -813,11 +822,7 @@ function BaseSelectionList<TItem extends ListItem>(
             {shouldShowTextInput && !shouldShowTextInputAfterHeader && renderInput()}
             {/* If we are loading new options we will avoid showing any header message. This is mostly because one of the header messages says there are no options. */}
             {/* This is misleading because we might be in the process of loading fresh options from the server. */}
-            {(!isLoadingNewOptions || headerMessage !== translate('common.noResultsFound') || (flattenedSections.allOptions.length === 0 && !showLoadingPlaceholder)) && !!headerMessage && (
-                <View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
-                    <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
-                </View>
-            )}
+            {!shouldShowHeaderMessageAfterHeader && headerMessageContent()}
             {!!headerContent && headerContent}
             {flattenedSections.allOptions.length === 0 && (showLoadingPlaceholder || shouldShowListEmptyContent) ? (
                 renderListEmptyContent()
@@ -859,6 +864,7 @@ function BaseSelectionList<TItem extends ListItem>(
                                 <>
                                     {listHeaderContent}
                                     {renderInput()}
+                                    {shouldShowHeaderMessageAfterHeader && headerMessageContent()}
                                 </>
                             ) : (
                                 listHeaderContent

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -469,6 +469,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether the text input should be shown after list header */
     shouldShowTextInputAfterHeader?: boolean;
 
+    /** Whether the header message should be shown after list header */
+    shouldShowHeaderMessageAfterHeader?: boolean;
+
     /** Whether to include padding bottom */
     includeSafeAreaPaddingBottom?: boolean;
 

diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -132,6 +132,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
                 <>
                     <SelectionList
                         sections={[{data: searchedListOptions}]}
+                        headerMessage={searchedListOptions.length ? undefined : translate('common.noResultsFound')}
                         shouldShowTextInput={cardListOptions.length > CONST.COMPANY_CARDS.CARD_LIST_THRESHOLD}
                         textInputLabel={translate('common.search')}
                         textInputValue={searchText}
@@ -157,6 +158,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
                             </View>
                         }
                         shouldShowTextInputAfterHeader
+                        shouldShowHeaderMessageAfterHeader
                         includeSafeAreaPaddingBottom={false}
                         shouldShowListEmptyContent={false}
                         shouldUpdateFocusedIndex