Item in report list is not highlighted and list cannot be navigated with keyboard

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -34,7 +34,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
         const yearsList = searchText === '' ? years : years.filter((year) => year.text.includes(searchText));
         return {
             headerMessage: !yearsList.length ? translate('common.noResultsFound') : '',
-            sections: [{data: yearsList.sort((a, b) => b.value - a.value), indexOffset: 0}],
+            sections: [{data: yearsList.sort((a, b) => b.value - a.value)}],
         };
     }, [years, searchText, translate]);
 

src/components/MoneyRequestConfirmationList.js

@@ -378,14 +378,12 @@ function MoneyRequestConfirmationList(props) {
                     title: translate('moneyRequestConfirmationList.paidBy'),
                     data: [formattedPayeeOption],
                     shouldShow: true,
-                    indexOffset: 0,
                     isDisabled: shouldDisablePaidBySection,
                 },
                 {
                     title: translate('moneyRequestConfirmationList.splitWith'),
                     data: formattedParticipantsList,
                     shouldShow: true,
-                    indexOffset: 1,
                 },
             );
         } else {
@@ -397,7 +395,6 @@ function MoneyRequestConfirmationList(props) {
                 title: translate('common.to'),
                 data: formattedSelectedParticipants,
                 shouldShow: true,
-                indexOffset: 0,
             });
         }
         return sections;

src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

@@ -422,14 +422,12 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     title: translate('moneyRequestConfirmationList.paidBy'),
                     data: [formattedPayeeOption],
                     shouldShow: true,
-                    indexOffset: 0,
                     isDisabled: shouldDisablePaidBySection,
                 },
                 {
                     title: translate('moneyRequestConfirmationList.splitWith'),
                     data: formattedParticipantsList,
                     shouldShow: true,
-                    indexOffset: 1,
                 },
             );
         } else {
@@ -441,7 +439,6 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                 title: translate('common.to'),
                 data: formattedSelectedParticipants,
                 shouldShow: true,
-                indexOffset: 0,
             });
         }
         return sections;

src/components/OptionsList/BaseOptionsList.tsx

@@ -9,6 +9,7 @@ import SectionList from '@components/SectionList';
 import Text from '@components/Text';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
+import getSectionsWithIndexOffset from '@libs/getSectionsWithIndexOffset';
 import type {OptionData} from '@libs/ReportUtils';
 import StringUtils from '@libs/StringUtils';
 import variables from '@styles/variables';
@@ -67,6 +68,7 @@ function BaseOptionsList(
 
     const listContainerStyles = useMemo(() => listContainerStylesProp ?? [styles.flex1], [listContainerStylesProp, styles.flex1]);
     const contentContainerStyles = useMemo(() => [safeAreaPaddingBottomStyle, contentContainerStylesProp], [contentContainerStylesProp, safeAreaPaddingBottomStyle]);
+    const sectionsWithIndexOffset = getSectionsWithIndexOffset(sections);
 
     /**
      * This helper function is used to memoize the computation needed for getItemLayout. It is run whenever section data changes.
@@ -182,7 +184,7 @@ function BaseOptionsList(
                 option={item}
                 showTitleTooltip={showTitleTooltip}
                 hoverStyle={optionHoveredStyle}
-                optionIsFocused={!disableFocusOptions && !isItemDisabled && focusedIndex === index + section.indexOffset}
+                optionIsFocused={!disableFocusOptions && !isItemDisabled && focusedIndex === index + (section.indexOffset ?? 0)}
                 onSelectRow={onSelectRow}
                 isSelected={isSelected}
                 showSelectedState={canSelectMultipleOptions}
@@ -248,7 +250,7 @@ function BaseOptionsList(
                         onScroll={onScroll}
                         contentContainerStyle={contentContainerStyles}
                         showsVerticalScrollIndicator={showScrollIndicator}
-                        sections={sections}
+                        sections={sectionsWithIndexOffset}
                         keyExtractor={extractKey}
                         stickySectionHeadersEnabled={false}
                         renderItem={renderItem}

src/components/OptionsList/types.ts

@@ -10,7 +10,7 @@ type Section = {
     title: string;
 
     /** The initial index of this section given the total number of options in each section's data array */
-    indexOffset: number;
+    indexOffset?: number;
 
     /** Array of options */
     data: OptionData[];

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -14,9 +14,6 @@ const propTypes = {
             /** Title of the section */
             title: PropTypes.string,
 
-            /** The initial index of this section given the total number of options in each section's data array */
-            indexOffset: PropTypes.number,
-
             /** Array of options */
             data: PropTypes.arrayOf(optionPropTypes),
 

src/components/SelectionList/BaseSelectionList.tsx

@@ -17,6 +17,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
+import getSectionsWithIndexOffset from '@libs/getSectionsWithIndexOffset';
 import Log from '@libs/Log';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -78,6 +79,7 @@ function BaseSelectionList<TItem extends ListItem>(
     const isFocused = useIsFocused();
     const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
     const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true);
+    const sectionsWithIndexOffset = getSectionsWithIndexOffset(sections);
 
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
@@ -449,7 +451,7 @@ function BaseSelectionList<TItem extends ListItem>(
                                 {!headerMessage && !canSelectMultiple && customListHeader}
                                 <SectionList
                                     ref={listRef}
-                                    sections={sections}
+                                    sections={sectionsWithIndexOffset}
                                     stickySectionHeadersEnabled={false}
                                     renderSectionHeader={renderSectionHeader}
                                     renderItem={renderItem}

src/components/SelectionList/selectionListPropTypes.js

@@ -107,9 +107,6 @@ const propTypes = {
             /** Title of the section */
             title: PropTypes.string,
 
-            /** The initial index of this section given the total number of options in each section's data array */
-            indexOffset: PropTypes.number,
-
             /** Array of options */
             data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(userListItemPropTypes.item), PropTypes.shape(radioListItemPropTypes.item)])),
 

src/components/StatePicker/StateSelectorModal.tsx

@@ -95,7 +95,7 @@ function StateSelectorModal({currentState, isVisible, onClose = () => {}, onStat
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                     textInputLabel={label || translate('common.state')}
                     textInputValue={searchValue}
-                    sections={[{data: searchResults, indexOffset: 0}]}
+                    sections={[{data: searchResults}]}
                     onSelectRow={onStateSelected}
                     onChangeText={setSearchValue}
                     initiallyFocusedOptionKey={currentState}

src/libs/OptionsListUtils.ts

@@ -86,7 +86,6 @@ type PayeePersonalDetails = {
 type CategorySectionBase = {
     title: string | undefined;
     shouldShow: boolean;
-    indexOffset: number;
 };
 
 type CategorySection = CategorySectionBase & {
@@ -154,7 +153,6 @@ type MemberForList = {
 
 type SectionForSearchTerm = {
     section: CategorySection;
-    newIndexOffset: number;
 };
 
 type GetOptions = {
@@ -965,14 +963,11 @@ function getCategoryListSections(
     const categorySections: CategoryTreeSection[] = [];
     const numberOfCategories = enabledCategories.length;
 
-    let indexOffset = 0;
-
     if (numberOfCategories === 0 && selectedOptions.length > 0) {
         categorySections.push({
             // "Selected" section
             title: '',
             shouldShow: false,
-            indexOffset,
             data: getCategoryOptionTree(selectedOptions, true),
         });
 
@@ -986,7 +981,6 @@ function getCategoryListSections(
             // "Search" section
             title: '',
             shouldShow: true,
-            indexOffset,
             data: getCategoryOptionTree(searchCategories, true),
         });
 
@@ -1002,7 +996,6 @@ function getCategoryListSections(
             // "All" section when items amount less than the threshold
             title: '',
             shouldShow: false,
-            indexOffset,
             data: getCategoryOptionTree(enabledAndSelectedCategories),
         });
 
@@ -1014,11 +1007,8 @@ function getCategoryListSections(
             // "Selected" section
             title: '',
             shouldShow: false,
-            indexOffset,
             data: getCategoryOptionTree(selectedOptions, true),
         });
-
-        indexOffset += selectedOptions.length;
     }
 
     const filteredRecentlyUsedCategories = recentlyUsedCategories
@@ -1035,11 +1025,8 @@ function getCategoryListSections(
             // "Recent" section
             title: Localize.translateLocal('common.recent'),
             shouldShow: true,
-            indexOffset,
             data: getCategoryOptionTree(cutRecentlyUsedCategories, true),
         });
-
-        indexOffset += filteredRecentlyUsedCategories.length;
     }
 
     const filteredCategories = enabledCategories.filter((category) => !selectedOptionNames.includes(category.name));
@@ -1048,7 +1035,6 @@ function getCategoryListSections(
         // "All" section when items amount more than the threshold
         title: Localize.translateLocal('common.all'),
         shouldShow: true,
-        indexOffset,
         data: getCategoryOptionTree(filteredCategories),
     });
 
@@ -1083,7 +1069,6 @@ function getTagListSections(tags: Tag[], recentlyUsedTags: string[], selectedOpt
     const selectedOptionNames = selectedOptions.map((selectedOption) => selectedOption.name);
     const enabledTags = [...selectedOptions, ...sortedTags.filter((tag) => tag.enabled && !selectedOptionNames.includes(tag.name))];
     const numberOfTags = enabledTags.length;
-    let indexOffset = 0;
 
     // If all tags are disabled but there's a previously selected tag, show only the selected tag
     if (numberOfTags === 0 && selectedOptions.length > 0) {
@@ -1096,7 +1081,6 @@ function getTagListSections(tags: Tag[], recentlyUsedTags: string[], selectedOpt
             // "Selected" section
             title: '',
             shouldShow: false,
-            indexOffset,
             data: getTagsOptions(selectedTagOptions),
         });
 
@@ -1110,7 +1094,6 @@ function getTagListSections(tags: Tag[], recentlyUsedTags: string[], selectedOpt
             // "Search" section
             title: '',
             shouldShow: true,
-            indexOffset,
             data: getTagsOptions(searchTags),
         });
 
@@ -1122,7 +1105,6 @@ function getTagListSections(tags: Tag[], recentlyUsedTags: string[], selectedOpt
             // "All" section when items amount less than the threshold
             title: '',
             shouldShow: false,
-            indexOffset,
             data: getTagsOptions(enabledTags),
         });
 
@@ -1148,11 +1130,8 @@ function getTagListSections(tags: Tag[], recentlyUsedTags: string[], selectedOpt
             // "Selected" section
             title: '',
             shouldShow: true,
-            indexOffset,
             data: getTagsOptions(selectedTagOptions),
         });
-
-        indexOffset += selectedOptions.length;
     }
 
     if (filteredRecentlyUsedTags.length > 0) {
@@ -1162,18 +1141,14 @@ function getTagListSections(tags: Tag[], recentlyUsedTags: string[], selectedOpt
             // "Recent" section
             title: Localize.translateLocal('common.recent'),
             shouldShow: true,
-            indexOffset,
             data: getTagsOptions(cutRecentlyUsedTags),
         });
-
-        indexOffset += filteredRecentlyUsedTags.length;
     }
 
     tagSections.push({
         // "All" section when items amount more than the threshold
         title: Localize.translateLocal('common.all'),
         shouldShow: true,
-        indexOffset,
         data: getTagsOptions(filteredTags),
     });
 
@@ -1236,8 +1211,6 @@ function getTaxRatesSection(taxRates: TaxRatesWithDefault | undefined, selectedO
     const enabledTaxRates = sortedTaxRates.filter((taxRate) => !taxRate.isDisabled);
     const numberOfTaxRates = enabledTaxRates.length;
 
-    let indexOffset = 0;
-
     // If all tax are disabled but there's a previously selected tag, show only the selected tag
     if (numberOfTaxRates === 0 && selectedOptions.length > 0) {
         const selectedTaxRateOptions = selectedOptions.map((option) => ({
@@ -1249,7 +1222,6 @@ function getTaxRatesSection(taxRates: TaxRatesWithDefault | undefined, selectedO
             // "Selected" sectiong
             title: '',
             shouldShow: false,
-            indexOffset,
             data: getTaxRatesOptions(selectedTaxRateOptions),
         });
 
@@ -1263,7 +1235,6 @@ function getTaxRatesSection(taxRates: TaxRatesWithDefault | undefined, selectedO
             // "Search" section
             title: '',
             shouldShow: true,
-            indexOffset,
             data: getTaxRatesOptions(searchTaxRates),
         });
 
@@ -1275,7 +1246,6 @@ function getTaxRatesSection(taxRates: TaxRatesWithDefault | undefined, selectedO
             // "All" section when items amount less than the threshold
             title: '',
             shouldShow: false,
-            indexOffset,
             data: getTaxRatesOptions(enabledTaxRates),
         });
 
@@ -1299,18 +1269,14 @@ function getTaxRatesSection(taxRates: TaxRatesWithDefault | undefined, selectedO
             // "Selected" section
             title: '',
             shouldShow: true,
-            indexOffset,
             data: getTaxRatesOptions(selectedTaxRatesOptions),
         });
-
-        indexOffset += selectedOptions.length;
     }
 
     policyRatesSections.push({
         // "All" section when number of items are more than the threshold
         title: '',
         shouldShow: true,
-        indexOffset,
         data: getTaxRatesOptions(filteredTaxRates),
     });
 
@@ -1985,7 +1951,6 @@ function formatSectionsFromSearchTerm(
     filteredRecentReports: ReportUtils.OptionData[],
     filteredPersonalDetails: ReportUtils.OptionData[],
     maxOptionsSelected: boolean,
-    indexOffset = 0,
     personalDetails: OnyxEntry<PersonalDetailsList> = {},
     shouldGetOptionDetails = false,
 ): SectionForSearchTerm {
@@ -2003,9 +1968,7 @@ function formatSectionsFromSearchTerm(
                       })
                     : selectedOptions,
                 shouldShow: selectedOptions.length > 0,
-                indexOffset,
             },
-            newIndexOffset: indexOffset + selectedOptions.length,
         };
     }
 
@@ -2029,9 +1992,7 @@ function formatSectionsFromSearchTerm(
                   })
                 : selectedParticipantsWithoutDetails,
             shouldShow: selectedParticipantsWithoutDetails.length > 0,
-            indexOffset,
         },
-        newIndexOffset: indexOffset + selectedParticipantsWithoutDetails.length,
     };
 }
 

src/libs/getSectionsWithIndexOffset.ts

@@ -0,0 +1,9 @@
+import type {SectionListData} from 'react-native';
+
+/** Returns a list of sections with IndexOffset */
+export default function getSectionsWithIndexOffset<ItemT, SectionT>(sections: Array<SectionListData<ItemT, SectionT>>) {
+    return sections.map((section, index) => {
+        const indexOffset = [...sections].splice(0, index).reduce((acc, curr) => acc + (curr.data?.length ?? 0), 0);
+        return {...section, indexOffset};
+    });
+}

src/pages/EditReportFieldDropdownPage.tsx

@@ -92,6 +92,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldID, fieldValue,
                         textInputLabel={translate('common.search')}
                         boldStyle
                         sections={sections}
+                        focusedIndex={0}
                         value={searchValue}
                         onSelectRow={(option: Record<string, string>) => onSubmit({[fieldID]: option.text})}
                         onChangeText={setSearchValue}