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.tsx

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

src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

@@ -436,14 +436,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 {
@@ -455,7 +453,6 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                 title: translate('common.to'),
                 data: formattedSelectedParticipants,
                 shouldShow: true,
-                indexOffset: 0,
             });
         }
         return sections;

src/components/OptionsList/BaseOptionsList.tsx

@@ -9,11 +9,12 @@ 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';
 import CONST from '@src/CONST';
-import type {BaseOptionListProps, OptionsList, OptionsListData, Section} from './types';
+import type {BaseOptionListProps, OptionsList, OptionsListData, OptionsListDataWithIndexOffset, SectionWithIndexOffset} from './types';
 
 function BaseOptionsList(
     {
@@ -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.
@@ -133,7 +135,8 @@ function BaseOptionsList(
      *
      *     [{header}, {sectionHeader}, {item}, {item}, {sectionHeader}, {item}, {item}, {footer}]
      */
-    const getItemLayout = (_data: OptionsListData[] | null, flatDataArrayIndex: number) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const getItemLayout = (_data: OptionsListDataWithIndexOffset[] | null, flatDataArrayIndex: number) => {
         if (!flattenedData.current[flatDataArrayIndex]) {
             flattenedData.current = buildFlatSectionArray();
         }
@@ -161,7 +164,7 @@ function BaseOptionsList(
      * @return {Component}
      */
 
-    const renderItem: SectionListRenderItem<OptionData, Section> = ({item, index, section}) => {
+    const renderItem: SectionListRenderItem<OptionData, SectionWithIndexOffset> = ({item, index, section}) => {
         const isItemDisabled = isDisabled || !!section.isDisabled || !!item.isDisabled;
         const isSelected = selectedOptions?.some((option) => {
             if (option.keyForList && option.keyForList === item.keyForList) {
@@ -202,7 +205,7 @@ function BaseOptionsList(
     /**
      * Function which renders a section header component
      */
-    const renderSectionHeader = ({section: {title, shouldShow}}: {section: OptionsListData}) => {
+    const renderSectionHeader = ({section: {title, shouldShow}}: {section: OptionsListDataWithIndexOffset}) => {
         if (!title && shouldShow && !hideSectionHeaders && sectionHeaderStyle) {
             return <View style={sectionHeaderStyle} />;
         }
@@ -235,7 +238,7 @@ function BaseOptionsList(
                             <Text style={[styles.textLabel, styles.colorMuted]}>{headerMessage}</Text>
                         </View>
                     ) : null}
-                    <SectionList<OptionData, Section>
+                    <SectionList<OptionData, SectionWithIndexOffset>
                         ref={ref}
                         style={listStyles}
                         indicatorStyle="white"
@@ -247,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

@@ -2,16 +2,14 @@ import type {RefObject} from 'react';
 import type {SectionList, SectionListData, StyleProp, View, ViewStyle} from 'react-native';
 import type {OptionData} from '@libs/ReportUtils';
 
-type OptionsList = SectionList<OptionData, Section>;
 type OptionsListData = SectionListData<OptionData, Section>;
+type OptionsListDataWithIndexOffset = SectionListData<OptionData, SectionWithIndexOffset>;
+type OptionsList = SectionList<OptionData, SectionWithIndexOffset>;
 
 type Section = {
     /** Title of the section */
     title: string;
 
-    /** The initial index of this section given the total number of options in each section's data array */
-    indexOffset: number;
-
     /** Array of options */
     data: OptionData[];
 
@@ -22,6 +20,11 @@ type Section = {
     isDisabled?: boolean;
 };
 
+type SectionWithIndexOffset = Section & {
+    /** The initial index of this section given the total number of options in each section's data array */
+    indexOffset: number;
+};
+
 type OptionsListProps = {
     /** option flexStyle for the options list container */
     listContainerStyles?: StyleProp<ViewStyle>;
@@ -134,4 +137,4 @@ type BaseOptionListProps = OptionsListProps & {
     listStyles?: StyleProp<ViewStyle>;
 };
 
-export type {OptionsListProps, BaseOptionListProps, Section, OptionsList, OptionsListData};
+export type {OptionsListProps, BaseOptionListProps, Section, OptionsList, OptionsListData, SectionWithIndexOffset, OptionsListDataWithIndexOffset};

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

@@ -20,11 +20,12 @@ 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';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type {BaseSelectionListProps, ButtonOrCheckBoxRoles, FlattenedSectionsReturn, ListItem, Section, SectionListDataType, SelectionListHandle} from './types';
+import type {BaseSelectionListProps, ButtonOrCheckBoxRoles, FlattenedSectionsReturn, ListItem, SectionListDataType, SectionWithIndexOffset, SelectionListHandle} from './types';
 
 function BaseSelectionList<TItem extends ListItem>(
     {
@@ -74,7 +75,7 @@ function BaseSelectionList<TItem extends ListItem>(
 ) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const listRef = useRef<RNSectionList<TItem, Section<TItem>>>(null);
+    const listRef = useRef<RNSectionList<TItem, SectionWithIndexOffset<TItem>>>(null);
     const innerTextInputRef = useRef<RNTextInput | null>(null);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const shouldShowTextInput = !!textInputLabel;
@@ -166,15 +167,17 @@ function BaseSelectionList<TItem extends ListItem>(
 
     const [slicedSections, ShowMoreButtonInstance] = useMemo(() => {
         let remainingOptionsLimit = CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage;
-        const processedSections = sections.map((section) => {
-            const data = !isEmpty(section.data) && remainingOptionsLimit > 0 ? section.data.slice(0, remainingOptionsLimit) : [];
-            remainingOptionsLimit -= data.length;
-
-            return {
-                ...section,
-                data,
-            };
-        });
+        const processedSections = getSectionsWithIndexOffset(
+            sections.map((section) => {
+                const data = !isEmpty(section.data) && remainingOptionsLimit > 0 ? section.data.slice(0, remainingOptionsLimit) : [];
+                remainingOptionsLimit -= data.length;
+
+                return {
+                    ...section,
+                    data,
+                };
+            }),
+        );
 
         const shouldShowMoreButton = flattenedSections.allOptions.length > CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage;
         const showMoreButton = shouldShowMoreButton ? (
@@ -312,9 +315,8 @@ function BaseSelectionList<TItem extends ListItem>(
         );
     };
 
-    const renderItem = ({item, index, section}: SectionListRenderItemInfo<TItem, Section<TItem>>) => {
-        const indexOffset = section.indexOffset ? section.indexOffset : 0;
-        const normalizedIndex = index + indexOffset;
+    const renderItem = ({item, index, section}: SectionListRenderItemInfo<TItem, SectionWithIndexOffset<TItem>>) => {
+        const normalizedIndex = index + section.indexOffset;
         const isDisabled = !!section.isDisabled || item.isDisabled;
         const isItemFocused = !isDisabled && (focusedIndex === normalizedIndex || itemsToHighlight?.has(item.keyForList ?? ''));
         // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.

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/SelectionList/types.ts

@@ -161,9 +161,6 @@ type Section<TItem extends ListItem> = {
     /** Title of the section */
     title?: string;
 
-    /** The initial index of this section given the total number of options in each section's data array */
-    indexOffset?: number;
-
     /** Array of options */
     data?: TItem[];
 
@@ -174,6 +171,11 @@ type Section<TItem extends ListItem> = {
     shouldShow?: boolean;
 };
 
+type SectionWithIndexOffset<TItem extends ListItem> = Section<TItem> & {
+    /** The initial index of this section given the total number of options in each section's data array */
+    indexOffset: number;
+};
+
 type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Sections for the section list */
     sections: Array<SectionListData<TItem, Section<TItem>>> | typeof CONST.EMPTY_ARRAY;
@@ -324,12 +326,13 @@ type FlattenedSectionsReturn<TItem extends ListItem> = {
 
 type ButtonOrCheckBoxRoles = 'button' | 'checkbox';
 
-type SectionListDataType<TItem extends ListItem> = SectionListData<TItem, Section<TItem>>;
+type SectionListDataType<TItem extends ListItem> = SectionListData<TItem, SectionWithIndexOffset<TItem>>;
 
 export type {
     BaseSelectionListProps,
     CommonListItemProps,
     Section,
+    SectionWithIndexOffset,
     BaseListItemProps,
     UserListItemProps,
     RadioListItemProps,

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}