Fix: different behavior when using app and device back button in selection mode

src/components/Search/SearchContext.tsx

@@ -4,6 +4,7 @@ import type {SearchContext, SelectedTransactions} from './types';
 
 const defaultSearchContext = {
     currentSearchHash: -1,
+    shouldTurnOffSelectionMode: false,
     selectedTransactions: {},
     setCurrentSearchHash: () => {},
     setSelectedTransactions: () => {},
@@ -13,9 +14,10 @@ const defaultSearchContext = {
 const Context = React.createContext<SearchContext>(defaultSearchContext);
 
 function SearchContextProvider({children}: ChildrenProps) {
-    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions'>>({
+    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions' | 'shouldTurnOffSelectionMode'>>({
         currentSearchHash: defaultSearchContext.currentSearchHash,
         selectedTransactions: defaultSearchContext.selectedTransactions,
+        shouldTurnOffSelectionMode: false,
     });
 
     const setCurrentSearchHash = useCallback((searchHash: number) => {
@@ -29,16 +31,18 @@ function SearchContextProvider({children}: ChildrenProps) {
         setSearchContextData((prevState) => ({
             ...prevState,
             selectedTransactions,
+            shouldTurnOffSelectionMode: false,
         }));
     }, []);
 
     const clearSelectedTransactions = useCallback(
-        (searchHash?: number) => {
+        (searchHash?: number, shouldTurnOffSelectionMode = false) => {
             if (searchHash === searchContextData.currentSearchHash) {
                 return;
             }
             setSearchContextData((prevState) => ({
                 ...prevState,
+                shouldTurnOffSelectionMode,
                 selectedTransactions: {},
             }));
         },

src/components/Search/index.tsx

@@ -79,7 +79,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
     const {isLargeScreenWidth, isSmallScreenWidth} = useWindowDimensions();
     const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
-    const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions} = useSearchContext();
+    const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions, shouldTurnOffSelectionMode} = useSearchContext();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
     const [offset, setOffset] = useState(0);
     const [offlineModalVisible, setOfflineModalVisible] = useState(false);
@@ -96,6 +96,13 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
         setCurrentSearchHash(hash);
     }, [hash, clearSelectedTransactions, setCurrentSearchHash]);
 
+    useEffect(() => {
+        const selectedKeys = Object.keys(selectedTransactions).filter((key) => selectedTransactions[key]);
+        if (selectedKeys.length === 0 && selectionMode?.isEnabled && shouldTurnOffSelectionMode) {
+            turnOffMobileSelectionMode();
+        }
+    }, [selectedTransactions, selectionMode?.isEnabled, shouldTurnOffSelectionMode]);
+
     useEffect(() => {
         const selectedKeys = Object.keys(selectedTransactions).filter((key) => selectedTransactions[key]);
         if (!isSmallScreenWidth) {

src/components/Search/types.ts

@@ -31,7 +31,8 @@ type SearchContext = {
     selectedTransactions: SelectedTransactions;
     setCurrentSearchHash: (hash: number) => void;
     setSelectedTransactions: (selectedTransactions: SelectedTransactions) => void;
-    clearSelectedTransactions: (hash?: number) => void;
+    clearSelectedTransactions: (hash?: number, shouldTurnOffSelectionMode?: boolean) => void;
+    shouldTurnOffSelectionMode: boolean;
 };
 
 type ASTNode = {

src/pages/Search/SearchPageBottomTab.tsx

@@ -1,4 +1,5 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
+import {BackHandler} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -9,7 +10,6 @@ import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import {buildSearchQueryJSON} from '@libs/SearchUtils';
@@ -28,6 +28,22 @@ function SearchPageBottomTab() {
     const {clearSelectedTransactions} = useSearchContext();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
 
+    const handleBackButtonPress = useCallback(() => {
+        if (!selectionMode?.isEnabled) {
+            return false;
+        }
+        if (selectionMode?.isEnabled) {
+            clearSelectedTransactions(undefined, true);
+            return true;
+        }
+    }, [selectionMode, clearSelectedTransactions]);
+
+    useEffect(() => {
+        const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButtonPress);
+
+        return () => backHandler.remove();
+    }, [handleBackButtonPress]);
+
     const {queryJSON, policyIDs, isCustomQuery} = useMemo(() => {
         if (!activeCentralPaneRoute || activeCentralPaneRoute.name !== SCREENS.SEARCH.CENTRAL_PANE) {
             return {queryJSON: undefined, policyIDs: undefined};
@@ -71,10 +87,7 @@ function SearchPageBottomTab() {
                 ) : (
                     <HeaderWithBackButton
                         title={translate('common.selectMultiple')}
-                        onBackButtonPress={() => {
-                            clearSelectedTransactions();
-                            turnOffMobileSelectionMode();
-                        }}
+                        onBackButtonPress={handleBackButtonPress}
                     />
                 )}
                 {shouldUseNarrowLayout && queryJSON && (