Merge pull request Expensify#56225 from Krishna2323/krishna2323/issue…

…/53344_fix2

fix: On selecting a category/ tags by multiple tapping, user directed to conversation page.

src/components/SelectionList/BaseSelectionList.tsx

@@ -124,6 +124,7 @@ function BaseSelectionList<TItem extends ListItem>(
         listItemTitleStyles,
         initialNumToRender = 12,
         listItemTitleContainerStyles,
+        isScreenFocused = false,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -381,6 +382,9 @@ function BaseSelectionList<TItem extends ListItem>(
      */
     const selectRow = useCallback(
         (item: TItem, indexToFocus?: number) => {
+            if (!isFocused && !isScreenFocused) {
+                return;
+            }
             // In single-selection lists we don't care about updating the focused index, because the list is closed after selecting an item
             if (canSelectMultiple) {
                 if (sections.length > 1 && !item.isSelected) {
@@ -413,6 +417,8 @@ function BaseSelectionList<TItem extends ListItem>(
             setFocusedIndex,
             onSelectRow,
             shouldPreventDefaultFocusOnSelectRow,
+            isFocused,
+            isScreenFocused,
         ],
     );
 

src/components/SelectionList/types.ts

@@ -662,6 +662,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Initial number of items to render */
     initialNumToRender?: number;
+
+    /** Whether the screen is focused or not. (useIsFocused state does not work in tab screens, e.g. SearchPageBottomTab) */
+    isScreenFocused?: boolean;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {

src/components/SelectionListWithModal/index.tsx

@@ -106,6 +106,7 @@ function SelectionListWithModal<TItem extends ListItem>(
                 ref={ref}
                 sections={sections}
                 onLongPressRow={handleLongPressRow}
+                isScreenFocused={isScreenFocused}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...rest}
             />

src/pages/WorkspaceSwitcherPage/index.tsx

@@ -1,4 +1,3 @@
-import {useIsFocused} from '@react-navigation/native';
 import React, {useCallback, useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -39,7 +38,6 @@ function WorkspaceSwitcherPage() {
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const {translate} = useLocalize();
     const {activeWorkspaceID} = useActiveWorkspace();
-    const isFocused = useIsFocused();
 
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
@@ -83,17 +81,14 @@ function WorkspaceSwitcherPage() {
 
     const selectPolicy = useCallback(
         (policyID?: string) => {
-            if (!isFocused) {
-                return;
-            }
             const newPolicyID = policyID === activeWorkspaceID ? undefined : policyID;
 
             Navigation.goBack();
             // On native platforms, we will see a blank screen if we navigate to a new HomeScreen route while navigating back at the same time.
             // Therefore we delay switching the workspace until after back navigation, using the InteractionManager.
             switchPolicyAfterInteractions(newPolicyID);
         },
-        [activeWorkspaceID, isFocused],
+        [activeWorkspaceID],
     );
 
     const usersWorkspaces = useMemo<WorkspaceListItem[]>(() => {

tests/unit/BaseSelectionListTest.tsx

@@ -1,3 +1,4 @@
+import * as NativeNavigation from '@react-navigation/native';
 import {fireEvent, render, screen} from '@testing-library/react-native';
 import {SectionList} from 'react-native';
 import BaseSelectionList from '@components/SelectionList/BaseSelectionList';
@@ -44,8 +45,17 @@ describe('BaseSelectionList', () => {
         );
     }
 
+    it('should not trigger item press if screen is not focused', () => {
+        (NativeNavigation.useIsFocused as jest.Mock).mockReturnValue(false);
+        render(<BaseListItemRenderer sections={[{data: mockSections}]} />);
+        fireEvent.press(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}1`));
+        expect(onSelectRowMock).toHaveBeenCalledTimes(0);
+    });
+
     it('should handle item press correctly', () => {
+        (NativeNavigation.useIsFocused as jest.Mock).mockReturnValue(true);
         render(<BaseListItemRenderer sections={[{data: mockSections}]} />);
+
         fireEvent.press(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}1`));
         expect(onSelectRowMock).toHaveBeenCalledWith({
             ...mockSections.at(1),
@@ -54,6 +64,7 @@ describe('BaseSelectionList', () => {
     });
 
     it('should update focused item when sections are updated from BE', () => {
+        (NativeNavigation.useIsFocused as jest.Mock).mockReturnValue(true);
         const updatedMockSections = mockSections.map((section) => ({
             ...section,
             isSelected: section.keyForList === '2',