prevent beforeunload firing when opening route in desktop

Author: nkdengineer

src/libs/ActiveClientManager/index.ts

@@ -5,11 +5,11 @@
  */
 import {Str} from 'expensify-common';
 import Onyx from 'react-native-onyx';
+import {isOpeningRouteInDesktop, resetIsOpeningRouteInDesktop} from '@libs/Browser/index.website';
+import Log from '@libs/Log';
 import * as ActiveClients from '@userActions/ActiveClients';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Init, IsClientTheLeader, IsReady} from './types';
-import Log from '@libs/Log';
-import { isDevelopment } from '@libs/Environment/Environment';
 
 const clientID = Str.guid();
 const maxClients = 20;
@@ -18,8 +18,8 @@ let resolveSavedSelfPromise: () => void;
 const savedSelfPromise = new Promise<void>((resolve) => {
     resolveSavedSelfPromise = resolve;
 });
-// The first time before unload is triggered by `openRouteInDesktopApp` function so we don't want to clear the clientID in this case.
-let shouldPreventBeforeUnload = !isDevelopment();
+let beforeunloadListenerAdded = false;
+
 /**
  * Determines when the client is ready. We need to wait both till we saved our ID in onyx AND the init method was called
  */
@@ -34,7 +34,7 @@ Onyx.connect({
 
         activeClients = val;
 
-        console.log("[Active Clients] the client value is changed to", activeClients);
+        console.log('[Active Clients] the client value is changed to', activeClients);
         // Remove from the beginning of the list any clients that are past the limit, to avoid having thousands of them
         let removed = false;
         while (activeClients.length >= maxClients) {
@@ -70,15 +70,10 @@ const isClientTheLeader: IsClientTheLeader = () => {
 
     Log.info(`[Active Clients] checking the leader lastActiveClient=${lastActiveClient} clientID=${clientID}`);
 
-
     return lastActiveClient === clientID;
 };
 
 const cleanUpClientId = () => {
-    if (shouldPreventBeforeUnload) {
-        shouldPreventBeforeUnload = false;
-        return;
-    }
     isPromotingNewLeader = isClientTheLeader();
     activeClients = activeClients.filter((id) => id !== clientID);
     Log.info(`[Active Clients] removed a client here clientID=${clientID}`);
@@ -89,18 +84,36 @@ const cleanUpClientId = () => {
     });
 };
 
+const removeBeforeUnloadListener = () => {
+    if (!beforeunloadListenerAdded) {
+        return;
+    }
+    beforeunloadListenerAdded = false;
+    window.removeEventListener('beforeunload', cleanUpClientId);
+};
+
 /**
  * Add our client ID to the list of active IDs.
  * We want to ensure we have no duplicates and that the activeClient gets added at the end of the array (see isClientTheLeader)
  */
 const init: Init = () => {
+    removeBeforeUnloadListener();
     activeClients = activeClients.filter((id) => id !== clientID);
     activeClients.push(clientID);
     Log.info(`[Active Clients] added a client here clientID=${clientID}`);
     console.log(JSON.parse(JSON.stringify(activeClients)));
     ActiveClients.setActiveClients(activeClients).then(resolveSavedSelfPromise);
 
-    window.addEventListener('beforeunload', cleanUpClientId);
+    beforeunloadListenerAdded = true;
+    window.addEventListener('beforeunload', () => {
+        // When we open route in desktop, beforeunload is fired unexpectedly here.
+        // So we should return early in this case to prevent cleaning the clientID
+        if (isOpeningRouteInDesktop()) {
+            resetIsOpeningRouteInDesktop();
+            return;
+        }
+        cleanUpClientId();
+    });
 };
 
 export {init, isClientTheLeader, isReady};

src/libs/Browser/index.website.ts

@@ -3,6 +3,7 @@ import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileSafari, IsMobileWebKit, IsSafari, OpenRouteInDesktopApp} from './types';
 
+let isOpenRouteInDesktop = false;
 /**
  * Fetch browser name from UA string
  *
@@ -113,8 +114,17 @@ const openRouteInDesktopApp: OpenRouteInDesktopApp = (shortLivedAuthToken = '',
             document.body.removeChild(iframe);
         }, 0);
     } else {
+        isOpenRouteInDesktop = true;
         window.location.href = expensifyDeeplinkUrl;
     }
 };
 
-export {getBrowser, isMobile, isMobileSafari, isMobileWebKit, isSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp};
+const isOpeningRouteInDesktop = () => {
+    return isOpenRouteInDesktop;
+};
+
+const resetIsOpeningRouteInDesktop = () => {
+    isOpenRouteInDesktop = false;
+};
+
+export {getBrowser, isMobile, isMobileSafari, isMobileWebKit, isSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp, isOpeningRouteInDesktop, resetIsOpeningRouteInDesktop};