Fix/76667 - Contact Import button not clickable due to autoscroll resets the list

src/components/SelectionListWithSections/BaseSelectionListItemRenderer.tsx

@@ -69,8 +69,15 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
         return onCheckboxPress ? () => onCheckboxPress(item) : undefined;
     };
 
+    // We add this render condition to allow customizing how an item is rendered in the list,
+    // without requiring that item to be a ListItem.
+    if (item.shouldOnlyRenderHeaderContent) {
+        return item.headerContent;
+    }
+
     return (
         <>
+            {item.headerContent && item.headerContent}
             <ListItem
                 item={item}
                 isFocused={isFocused}

src/components/SelectionListWithSections/types.ts

@@ -208,6 +208,12 @@ type ListItem<K extends string | number = string> = {
     /** Whether the brick road indicator should be shown */
     brickRoadIndicator?: BrickRoad | '' | null;
 
+    /** Allows us to render only the header content, making it easier to embed items other than ListItem into the list */
+    shouldOnlyRenderHeaderContent?: boolean;
+
+    /** Element to render above the ListItem */
+    headerContent?: ReactNode;
+
     /** Element to render below the ListItem */
     footerContent?: ReactNode;
 

src/libs/OptionsListUtils/index.ts

@@ -193,7 +193,7 @@
  */
 let currentUserLogin: string | undefined;
 let currentUserAccountID: number | undefined;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         currentUserLogin = value?.email;
@@ -202,13 +202,13 @@
 });
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => (allPersonalDetails = isEmptyObject(value) ? {} : value),
 });
 
 const policies: OnyxCollection<Policy> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     callback: (policy, key) => {
         if (!policy || !key || !policy.name) {
@@ -220,14 +220,14 @@
 });
 
 let allPolicies: OnyxCollection<Policy> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     waitForCollectionCallback: true,
     callback: (val) => (allPolicies = val),
 });
 
 let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -236,7 +236,7 @@
 });
 
 let allReportNameValuePairs: OnyxCollection<ReportNameValuePairs>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -248,7 +248,7 @@
 const allSortedReportActions: Record<string, ReportAction[]> = {};
 let allReportActions: OnyxCollection<ReportActions>;
 const lastVisibleReportActions: ReportActions = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => {
@@ -310,7 +310,7 @@
 });
 
 let activePolicyID: OnyxEntry<string>;
 Onyx.connect({
     key: ONYXKEYS.NVP_ACTIVE_POLICY_ID,
     callback: (value) => (activePolicyID = value),
 });
@@ -1461,7 +1461,7 @@
             if (!peekedValue) {
                 throw new Error('Heap is empty, cannot peek value');
             }
-            if (comparator(option) > comparator(peekedValue)) {
+            if (reversed ? comparator(option) < comparator(peekedValue) : comparator(option) > comparator(peekedValue)) {
                 heap.pop();
                 heap.push(option);
             }

src/libs/ReportUtils.ts

@@ -9,6 +9,7 @@ import isEmpty from 'lodash/isEmpty';
 import isNumber from 'lodash/isNumber';
 import mapValues from 'lodash/mapValues';
 import lodashMaxBy from 'lodash/maxBy';
+import type {ReactNode} from 'react';
 import type {ColorValue} from 'react-native';
 import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
@@ -899,6 +900,8 @@ type OptionData = {
     lastName?: string;
     avatar?: AvatarSource;
     timezone?: Timezone;
+    shouldOnlyRenderHeaderContent?: boolean;
+    headerContent?: ReactNode;
 } & Report &
     ReportNameValuePairs;
 

src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

@@ -272,6 +272,21 @@ function MoneyRequestParticipantsSelector({
         !(contactPermissionState === RESULTS.GRANTED || contactPermissionState === RESULTS.LIMITED) &&
         inputHelperText === translate('common.noResultsFound');
 
+    const importContactsButtonComponent = useMemo(() => {
+        const shouldShowImportContactsButton = contactState?.showImportUI ?? showImportContacts;
+        if (!shouldShowImportContactsButton) {
+            return null;
+        }
+        return (
+            <MenuItem
+                title={translate('contact.importContacts')}
+                icon={icons.UserPlus}
+                onPress={goToSettings}
+                shouldShowRightIcon
+            />
+        );
+    }, [icons.UserPlus, contactState?.showImportUI, showImportContacts, translate]);
+
     /**
      * Returns the sections needed for the OptionsSelector
      * @returns {Array}
@@ -349,6 +364,16 @@ function MoneyRequestParticipantsSelector({
             headerMessage = inputHelperText;
         }
 
+        const sectionsLength = newSections.reduce((value, section) => value + section.data.length, 0);
+        if (sectionsLength > 0 && importContactsButtonComponent) {
+            // Always render the "Import contacts" button at the top of the list
+            newSections.unshift({
+                title: undefined,
+                data: [{shouldOnlyRenderHeaderContent: true, headerContent: importContactsButtonComponent}],
+                shouldShow: true,
+            });
+        }
+
         return [newSections, headerMessage];
     }, [
         areOptionsInitialized,
@@ -368,6 +393,7 @@ function MoneyRequestParticipantsSelector({
         isPerDiemRequest,
         showImportContacts,
         inputHelperText,
+        importContactsButtonComponent,
     ]);
 
     /**
@@ -504,22 +530,6 @@ function MoneyRequestParticipantsSelector({
         [isIOUSplit, addParticipantToSelection, addSingleParticipant],
     );
 
-    const footerContentAbovePaginationComponent = useMemo(() => {
-        const shouldShowImportContactsButton = contactState?.showImportUI ?? showImportContacts;
-        if (!shouldShowImportContactsButton) {
-            return null;
-        }
-        return (
-            <MenuItem
-                title={translate('contact.importContacts')}
-                icon={icons.UserPlus}
-                onPress={goToSettings}
-                shouldShowRightIcon
-                style={styles.mb3}
-            />
-        );
-    }, [icons.UserPlus, contactState?.showImportUI, showImportContacts, styles.mb3, translate]);
-
     const ClickableImportContactTextComponent = useMemo(() => {
         if (searchTerm.length || isSearchingForReports) {
             return;
@@ -580,7 +590,6 @@ function MoneyRequestParticipantsSelector({
                 }
                 footerContent={footerContent}
                 listEmptyContent={EmptySelectionListContentWithPermission}
-                footerContentAbovePagination={footerContentAbovePaginationComponent}
                 headerMessage={header}
                 showLoadingPlaceholder={showLoadingPlaceholder}
                 canSelectMultiple={isIOUSplit && isAllowedToSplit}

tests/unit/OptionsListUtilsTest.tsx

@@ -2448,6 +2448,23 @@ describe('OptionsListUtils', () => {
             const result = optionsOrderBy(options, comparator, 0);
             expect(result).toEqual([]);
         });
+
+        it('returns the older options up to the specified limit', () => {
+            const options: OptionData[] = [
+                {reportID: '1', lastVisibleActionCreated: '2022-01-01T10:00:00Z'} as OptionData,
+                {reportID: '2', lastVisibleActionCreated: '2022-01-01T12:00:00Z'} as OptionData,
+                {reportID: '3', lastVisibleActionCreated: '2022-01-01T09:00:00Z'} as OptionData,
+                {reportID: '4', lastVisibleActionCreated: '2022-01-01T13:00:00Z'} as OptionData,
+            ];
+            const comparator = (option: OptionData) => option.lastVisibleActionCreated ?? '';
+            // We will pass reversed === true to sort the list in ascending order
+            const result = optionsOrderBy(options, comparator, 2, undefined, true);
+            expect(result.length).toBe(2);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            expect(result.at(0)!.reportID).toBe('3');
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            expect(result.at(1)!.reportID).toBe('1');
+        });
     });
 
     describe('sortAlphabetically', () => {