Make NewChatPage use new SelectionListWithSections

src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -1,7 +1,7 @@
 import {useIsFocused} from '@react-navigation/native';
 import {FlashList} from '@shopify/flash-list';
 import type {FlashListRef, ListRenderItemInfo} from '@shopify/flash-list';
-import React, {useImperativeHandle, useRef} from 'react';
+import React, {useCallback, useImperativeHandle, useRef} from 'react';
 import type {TextInputKeyPressEvent} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -92,23 +92,26 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
         hasKeyBeenPressed.current = true;
     };
 
-    const scrollToIndex = (index: number) => {
-        if (index < 0 || index >= flattenedData.length || !listRef.current) {
-            return;
-        }
-        const item = flattenedData.at(index);
-        if (!item) {
-            return;
-        }
-        try {
-            listRef.current.scrollToIndex({index});
-        } catch (error) {
-            // FlashList may throw if layout for this index doesn't exist yet
-            // This can happen when data changes rapidly (e.g., during search filtering)
-            // The layout will be computed on next render, so we can safely ignore this
-            Log.warn('SelectionListWithSections: error scrolling to index', {error});
-        }
-    };
+    const scrollToIndex = useCallback(
+        (index: number) => {
+            if (index < 0 || index >= flattenedData.length || !listRef.current) {
+                return;
+            }
+            const item = flattenedData.at(index);
+            if (!item) {
+                return;
+            }
+            try {
+                listRef.current.scrollToIndex({index});
+            } catch (error) {
+                // FlashList may throw if layout for this index doesn't exist yet
+                // This can happen when data changes rapidly (e.g., during search filtering)
+                // The layout will be computed on next render, so we can safely ignore this
+                Log.warn('SelectionListWithSections: error scrolling to index', {error});
+            }
+        },
+        [flattenedData],
+    );
 
     const debouncedScrollToIndex = useDebounce(scrollToIndex, CONST.TIMING.LIST_SCROLLING_DEBOUNCE_TIME, {leading: true, trailing: true});
 
@@ -174,6 +177,10 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
         innerTextInputRef.current?.focus();
     };
 
+    const clearInputAfterSelect = () => {
+        textInputOptions?.onChangeText?.('');
+    };
+
     const updateAndScrollToFocusedIndex = (index: number, shouldScroll = true) => {
         setFocusedIndex(index);
         if (shouldScroll) {
@@ -190,6 +197,8 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
 
     useImperativeHandle(ref, () => ({
         focusTextInput,
+        scrollToIndex,
+        clearInputAfterSelect,
         updateAndScrollToFocusedIndex,
         updateExternalTextInputFocus,
         getFocusedOption: getFocusedItem,

src/components/SelectionList/SelectionListWithSections/types.ts

@@ -50,6 +50,8 @@ type SelectionListWithSectionsProps<TItem extends ListItem> = BaseSelectionListP
 
 type SelectionListWithSectionsHandle<TItem extends ListItem = ListItem> = {
     focusTextInput: () => void;
+    scrollToIndex: (index: number) => void;
+    clearInputAfterSelect: () => void;
     updateAndScrollToFocusedIndex: (index: number, shouldScroll?: boolean) => void;
     updateExternalTextInputFocus: (isTextInputFocused: boolean) => void;
     getFocusedOption: () => TItem | undefined;

src/components/SelectionList/components/TextInput.tsx

@@ -65,7 +65,22 @@ function TextInput({
 }: TextInputProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {label, value, onChangeText, errorText, headerMessage, hint, disableAutoFocus, placeholder, maxLength, inputMode, ref: optionsRef, style, disableAutoCorrect} = options ?? {};
+    const {
+        label,
+        value,
+        onChangeText,
+        errorText,
+        headerMessage,
+        hint,
+        disableAutoFocus,
+        placeholder,
+        maxLength,
+        inputMode,
+        ref: optionsRef,
+        style,
+        disableAutoCorrect,
+        shouldInterceptSwipe,
+    } = options ?? {};
     const resultsFound = headerMessage !== translate('common.noResultsFound');
     const noData = dataLength === 0 && !showLoadingPlaceholder;
     const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);
@@ -134,8 +149,8 @@ function TextInput({
                     isLoading={isLoading}
                     testID="selection-list-text-input"
                     errorText={errorText}
-                    shouldInterceptSwipe={false}
                     autoCorrect={!disableAutoCorrect}
+                    shouldInterceptSwipe={shouldInterceptSwipe ?? false}
                 />
             </View>
             {shouldShowHeaderMessage && (

src/components/SelectionList/types.ts

@@ -250,6 +250,9 @@ type TextInputOptions = {
     /** Whether the text input auto correct should be disabled */
     disableAutoCorrect?: boolean;
 
+    /** Whether the text input should intercept swipes */
+    shouldInterceptSwipe?: boolean;
+
     /** Styles for the text input */
     style?: {
         /** Styles for the text input container */

src/hooks/useFilteredOptions.ts

@@ -103,15 +103,11 @@ function useFilteredOptions(config: UseFilteredOptionsConfig = {}): UseFilteredO
         if (!options || isLoadingMore) {
             return;
         }
-
-        const hasMoreToLoad = options.reports.length < totalReports;
-        if (hasMoreToLoad) {
-            setIsLoadingMore(true);
-            setReportsLimit((prev) => prev + batchSize);
-        }
+        setIsLoadingMore(true);
+        setReportsLimit((prev) => prev + batchSize);
     };
 
-    const hasMore = options ? options.reports.length < totalReports : false;
+    const hasMore = options ? reportsLimit < totalReports : false;
 
     return {
         options,

src/libs/OptionsListUtils/index.ts

@@ -205,13 +205,13 @@
  */
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => (allPersonalDetails = isEmptyObject(value) ? {} : value),
 });
 
 let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -220,7 +220,7 @@
 });
 
 let allReportNameValuePairsOnyxConnect: OnyxCollection<ReportNameValuePairs>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -231,7 +231,7 @@
 const lastReportActions: ReportActions = {};
 const allSortedReportActions: Record<string, ReportAction[]> = {};
 let allReportActions: OnyxCollection<ReportActions>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => {
@@ -273,7 +273,7 @@
 });
 
 let activePolicyID: OnyxEntry<string>;
 Onyx.connect({
     key: ONYXKEYS.NVP_ACTIVE_POLICY_ID,
     callback: (value) => (activePolicyID = value),
 });
@@ -2969,19 +2969,6 @@
     };
 }
 
-/**
- * Helper method to get the `keyForList` for the first option in the OptionsList
- */
-function getFirstKeyForList(data?: Option[] | null) {
-    if (!data?.length) {
-        return '';
-    }
-
-    const firstNonEmptyDataObj = data.at(0);
-
-    return firstNonEmptyDataObj?.keyForList ? firstNonEmptyDataObj?.keyForList : '';
-}
-
 function getPersonalDetailSearchTerms(item: Partial<SearchOptionData>, currentUserAccountID: number) {
     if (item.accountID === currentUserAccountID) {
         return getCurrentUserSearchTerms(item);
@@ -3379,7 +3366,6 @@
     getFilteredRecentAttendees,
     getCurrentUserSearchTerms,
     getEmptyOptions,
-    getFirstKeyForList,
     getHeaderMessage,
     getHeaderMessageForNonUserList,
     getIOUConfirmationOptionsFromPayeePersonalDetail,