fix: focused background is not updated

src/CONST.ts

@@ -6445,6 +6445,7 @@ const CONST = {
 
     MIGRATED_USER_WELCOME_MODAL: 'migratedUserWelcomeModal',
 
+    BASE_LIST_ITEM_TEST_ID: 'base-list-item-',
     PRODUCT_TRAINING_TOOLTIP_NAMES: {
         CONCEIRGE_LHN_GBR: 'conciergeLHNGBR',
         RENAME_SAVED_SEARCH: 'renameSavedSearch',

src/components/SelectionList/BaseListItem.tsx

@@ -108,6 +108,8 @@ function BaseListItem<TItem extends ListItem>({
                 wrapperStyle={pressableWrapperStyle}
             >
                 <View
+                    testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`}
+                    accessibilityState={{selected: !!isFocused}}
                     style={[
                         wrapperStyle,
                         isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),

src/components/SelectionList/BaseSelectionList.tsx

@@ -333,6 +333,15 @@ function BaseSelectionList<TItem extends ListItem>(
         isFocused,
     });
 
+    useEffect(() => {
+        const selectedItemIndex = flattenedSections.allOptions.findIndex((option) => option.isSelected);
+        if (selectedItemIndex === -1 || selectedItemIndex === focusedIndex) {
+            return;
+        }
+        setFocusedIndex(selectedItemIndex);
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [flattenedSections]);
+
     const clearInputAfterSelect = useCallback(() => {
         onChangeText?.('');
     }, [onChangeText]);

tests/unit/BaseSelectionListTest.tsx

@@ -0,0 +1,67 @@
+import {fireEvent, render, screen} from '@testing-library/react-native';
+import BaseSelectionList from '@components/SelectionList/BaseSelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import type {ListItem} from '@components/SelectionList/types';
+import type Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+
+type BaseSelectionListSections<TItem extends ListItem> = {
+    sections: TItem[];
+};
+
+const mockSections = Array.from({length: 10}, (_, index) => ({
+    text: `Item ${index}`,
+    keyForList: `${index}`,
+    isSelected: index === 1,
+}));
+
+jest.mock('@react-navigation/native', () => {
+    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
+    return {
+        ...actualNav,
+        useIsFocused: jest.fn(),
+        useFocusEffect: jest.fn(),
+    };
+});
+
+describe('BaseSelectionList', () => {
+    const onSelectRowMock = jest.fn();
+
+    function BaseListItemRenderer<TItem extends ListItem>(props: BaseSelectionListSections<TItem>) {
+        const {sections} = props;
+        const focusedKey = sections.find((item) => item.isSelected)?.keyForList;
+        return (
+            <BaseSelectionList
+                sections={[{data: sections}]}
+                ListItem={RadioListItem}
+                onSelectRow={onSelectRowMock}
+                shouldSingleExecuteRowSelect
+                initiallyFocusedOptionKey={focusedKey}
+            />
+        );
+    }
+
+    it('should handle item press correctly', () => {
+        render(<BaseListItemRenderer sections={mockSections} />);
+        fireEvent.press(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}1`));
+        expect(onSelectRowMock).toHaveBeenCalledWith({
+            ...mockSections.at(1),
+            shouldAnimateInHighlight: false,
+        });
+    });
+
+    it('should update focused item when sections are updated from BE', () => {
+        const updatedMockSections = mockSections.map((section) => ({
+            ...section,
+            isSelected: section.keyForList === '2',
+        }));
+        const {rerender} = render(<BaseListItemRenderer sections={mockSections} />);
+        expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}1`)).toHaveAccessibilityState({
+            selected: true,
+        });
+        rerender(<BaseListItemRenderer sections={updatedMockSections} />);
+        expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}2`)).toHaveAccessibilityState({
+            selected: true,
+        });
+    });
+});