Fix: There is option as select even when we press on selected option

src/CONST.ts

@@ -5012,6 +5012,7 @@ const CONST = {
     EVENTS: {
         SCROLLING: 'scrolling',
     },
+    SELECTION_LIST_WITH_MODAL_TEST_ID: 'selectionListWithModalMenuItem',
 
     CHAT_HEADER_LOADER_HEIGHT: 36,
 

src/components/Icon/Expensicons.ts

@@ -49,6 +49,7 @@ import ChatBubbleUnread from '@assets/images/chatbubble-unread.svg';
 import ChatBubble from '@assets/images/chatbubble.svg';
 import ChatBubbles from '@assets/images/chatbubbles.svg';
 import CheckCircle from '@assets/images/check-circle.svg';
+import CheckSquare from '@assets/images/check-square.svg';
 import Checkbox from '@assets/images/checkbox.svg';
 import CheckmarkCircle from '@assets/images/checkmark-circle.svg';
 import Checkmark from '@assets/images/checkmark.svg';
@@ -77,6 +78,7 @@ import DragAndDrop from '@assets/images/drag-and-drop.svg';
 import DragHandles from '@assets/images/drag-handles.svg';
 import Emoji from '@assets/images/emoji.svg';
 import Lightbulb from '@assets/images/emojiCategoryIcons/light-bulb.svg';
+import EmptySquare from '@assets/images/empty-square.svg';
 import EmptyStateAttachReceipt from '@assets/images/empty-state__attach-receipt.svg';
 import EmptyStateRoutePending from '@assets/images/emptystate__routepending.svg';
 import EReceiptIcon from '@assets/images/eReceiptIcon.svg';
@@ -434,4 +436,6 @@ export {
     Train,
     boltSlash,
     MagnifyingGlassSpyMouthClosed,
+    EmptySquare,
+    CheckSquare,
 };

src/components/SelectionListWithModal/index.tsx

@@ -1,7 +1,7 @@
 import {useIsFocused} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useEffect, useRef, useState} from 'react';
-import * as Expensicons from '@components/Icon/Expensicons';
+import {CheckSquare, EmptySquare} from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
 import SelectionList from '@components/SelectionList';
@@ -116,9 +116,10 @@ function SelectionListWithModal<TItem extends ListItem>(
                 shouldPreventScrollOnFocus
             >
                 <MenuItem
-                    title={translate('common.select')}
-                    icon={Expensicons.Checkmark}
+                    title={longPressedItem?.isSelected ? translate('common.deselect') : translate('common.select')}
+                    icon={longPressedItem?.isSelected ? EmptySquare : CheckSquare}
                     onPress={turnOnSelectionMode}
+                    pressableTestID={CONST.SELECTION_LIST_WITH_MODAL_TEST_ID}
                 />
             </Modal>
         </>

src/languages/en.ts

@@ -269,6 +269,7 @@ const translations = {
         resend: 'Resend',
         save: 'Save',
         select: 'Select',
+        deselect: 'Deselect',
         selectMultiple: 'Select multiple',
         saveChanges: 'Save changes',
         submit: 'Submit',

src/languages/es.ts

@@ -253,6 +253,7 @@ const translations = {
         find: 'Encontrar',
         searchWithThreeDots: 'Buscar...',
         select: 'Seleccionar',
+        deselect: 'Deseleccionar',
         selectMultiple: 'Seleccionar varios',
         next: 'Siguiente',
         create: 'Crear',

tests/ui/WorkspaceTagsTest.tsx

@@ -0,0 +1,151 @@
+import {PortalProvider} from '@gorhom/portal';
+import {NavigationContainer} from '@react-navigation/native';
+import {act, fireEvent, render, screen, waitFor} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import ComposeProviders from '@components/ComposeProviders';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxProvider from '@components/OnyxProvider';
+import {CurrentReportIDContextProvider} from '@hooks/useCurrentReportID';
+import * as useResponsiveLayoutModule from '@hooks/useResponsiveLayout';
+import type ResponsiveLayoutResult from '@hooks/useResponsiveLayout/types';
+import {translateLocal} from '@libs/Localize';
+import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
+import type {WorkspaceSplitNavigatorParamList} from '@navigation/types';
+import WorkspaceTagsPage from '@pages/workspace/tags/WorkspaceTagsPage';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
+import * as LHNTestUtils from '../utils/LHNTestUtils';
+import * as TestHelper from '../utils/TestHelper';
+import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
+
+TestHelper.setupGlobalFetchMock();
+
+const Stack = createPlatformStackNavigator<WorkspaceSplitNavigatorParamList>();
+
+const renderPage = (initialRouteName: typeof SCREENS.WORKSPACE.TAGS, initialParams: WorkspaceSplitNavigatorParamList[typeof SCREENS.WORKSPACE.TAGS]) => {
+    return render(
+        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, CurrentReportIDContextProvider]}>
+            <PortalProvider>
+                <NavigationContainer>
+                    <Stack.Navigator initialRouteName={initialRouteName}>
+                        <Stack.Screen
+                            name={SCREENS.WORKSPACE.TAGS}
+                            component={WorkspaceTagsPage}
+                            initialParams={initialParams}
+                        />
+                    </Stack.Navigator>
+                </NavigationContainer>
+            </PortalProvider>
+        </ComposeProviders>,
+    );
+};
+
+describe('WorkspaceTags', () => {
+    const FIRST_TAG = 'Tag One';
+    const SECOND_TAG = 'Tag Two';
+
+    beforeAll(() => {
+        Onyx.init({
+            keys: ONYXKEYS,
+        });
+    });
+
+    beforeEach(() => {
+        jest.spyOn(useResponsiveLayoutModule, 'default').mockReturnValue({
+            isSmallScreenWidth: true,
+            shouldUseNarrowLayout: true,
+        } as ResponsiveLayoutResult);
+    });
+
+    afterEach(async () => {
+        await act(async () => {
+            await Onyx.clear();
+        });
+        jest.clearAllMocks();
+    });
+
+    it('should show select option when the item is not selected and deselect option when the item is selected', async () => {
+        await TestHelper.signInWithTestUser();
+
+        const policy = {
+            ...LHNTestUtils.getFakePolicy(),
+            role: CONST.POLICY.ROLE.ADMIN,
+            areTagsEnabled: true,
+            requiresTag: true,
+        };
+
+        const tags = {
+            TagListOne: {
+                name: 'TagListOne',
+                required: true,
+                orderWeight: 1,
+                tags: {
+                    [FIRST_TAG]: {
+                        name: FIRST_TAG,
+                        enabled: true,
+                    },
+                    [SECOND_TAG]: {
+                        name: SECOND_TAG,
+                        enabled: true,
+                    },
+                },
+            },
+        };
+
+        await act(async () => {
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policy.id}`, policy);
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policy.id}`, tags);
+        });
+
+        const {unmount} = renderPage(SCREENS.WORKSPACE.TAGS, {policyID: policy.id});
+
+        await waitForBatchedUpdatesWithAct();
+
+        await waitFor(() => {
+            expect(screen.getByText(FIRST_TAG)).toBeOnTheScreen();
+        });
+        await waitFor(() => {
+            expect(screen.getByText(SECOND_TAG)).toBeOnTheScreen();
+        });
+
+        // Long press on the first tag to trigger the select action
+
+        fireEvent(screen.getByTestId(`base-list-item-Tag One`), 'onLongPress');
+
+        await waitForBatchedUpdatesWithAct();
+
+        // Wait for the "Select" option to appear
+        await waitFor(() => {
+            expect(screen.getByText(translateLocal('common.select'))).toBeOnTheScreen();
+        });
+
+        // Find and click the "Select" menu item. Using getByText, since testID is not reliable here
+        const selectMenuItem = screen.getByText(translateLocal('common.select'));
+        expect(selectMenuItem).toBeOnTheScreen();
+
+        // Create a mock event object that matches GestureResponderEvent. Needed for onPress in MenuItem to be called
+        const mockEvent = {
+            nativeEvent: {},
+            type: 'press',
+            target: selectMenuItem,
+            currentTarget: selectMenuItem,
+        };
+        fireEvent.press(selectMenuItem, mockEvent);
+
+        await waitForBatchedUpdatesWithAct();
+
+        // Long press again on the second tag to trigger the deselect action
+        fireEvent(screen.getByTestId('base-list-item-Tag One'), 'onLongPress');
+        await waitForBatchedUpdatesWithAct();
+
+        // Wait for the "Deselect" option to appear
+        await waitFor(() => {
+            expect(screen.getByText(translateLocal('common.deselect'))).toBeOnTheScreen();
+        });
+
+        unmount();
+        await waitForBatchedUpdatesWithAct();
+    });
+});