Merge pull request Expensify#84068 from Expensify/blimpich-revert81869

Author: blimpich

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, {useCallback, useImperativeHandle, useRef} from 'react';
+import React, {useImperativeHandle, useRef} from 'react';
 import type {TextInputKeyPressEvent} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -97,26 +97,23 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
         hasKeyBeenPressed.current = true;
     };
 
-    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 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 debouncedScrollToIndex = useDebounce(scrollToIndex, CONST.TIMING.LIST_SCROLLING_DEBOUNCE_TIME, {leading: true, trailing: true});
 
@@ -182,10 +179,6 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
         innerTextInputRef.current?.focus();
     };
 
-    const clearInputAfterSelect = () => {
-        textInputOptions?.onChangeText?.('');
-    };
-
     const updateAndScrollToFocusedIndex = (index: number, shouldScroll = true) => {
         setFocusedIndex(index);
         if (shouldScroll) {
@@ -202,8 +195,6 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
 
     useImperativeHandle(ref, () => ({
         focusTextInput,
-        scrollToIndex,
-        clearInputAfterSelect,
         updateAndScrollToFocusedIndex,
         updateExternalTextInputFocus,
         getFocusedOption: getFocusedItem,

src/components/SelectionList/SelectionListWithSections/types.ts

@@ -53,8 +53,6 @@ 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,22 +65,7 @@ function TextInput({
 }: TextInputProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {
-        label,
-        value,
-        onChangeText,
-        errorText,
-        headerMessage,
-        hint,
-        disableAutoFocus,
-        placeholder,
-        maxLength,
-        inputMode,
-        ref: optionsRef,
-        style,
-        disableAutoCorrect,
-        shouldInterceptSwipe,
-    } = options ?? {};
+    const {label, value, onChangeText, errorText, headerMessage, hint, disableAutoFocus, placeholder, maxLength, inputMode, ref: optionsRef, style, disableAutoCorrect} = options ?? {};
     const resultsFound = headerMessage !== translate('common.noResultsFound');
     const noData = dataLength === 0 && !showLoadingPlaceholder;
     const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData);
@@ -149,8 +134,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,9 +250,6 @@ 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,11 +103,15 @@ function useFilteredOptions(config: UseFilteredOptionsConfig = {}): UseFilteredO
         if (!options || isLoadingMore) {
             return;
         }
-        setIsLoadingMore(true);
-        setReportsLimit((prev) => prev + batchSize);
+
+        const hasMoreToLoad = options.reports.length < totalReports;
+        if (hasMoreToLoad) {
+            setIsLoadingMore(true);
+            setReportsLimit((prev) => prev + batchSize);
+        }
     };
 
-    const hasMore = options ? reportsLimit < totalReports : false;
+    const hasMore = options ? options.reports.length < totalReports : false;
 
     return {
         options,

src/libs/OptionsListUtils/index.ts

@@ -2972,6 +2972,19 @@ function formatSectionsFromSearchTerm(
     };
 }
 
+/**
+ * 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);
@@ -3369,6 +3382,7 @@ export {
     getFilteredRecentAttendees,
     getCurrentUserSearchTerms,
     getEmptyOptions,
+    getFirstKeyForList,
     getHeaderMessage,
     getHeaderMessageForNonUserList,
     getIOUConfirmationOptionsFromPayeePersonalDetail,