[CP-2801] Back and Forward mouse buttons cause unexpected MDS behavior (

#2034)

libs/core/core/components/apps/base-app/base-app-container.component.tsx

@@ -11,10 +11,12 @@ import BaseRoutes from "Core/core/components/apps/base-app/base-app-routes"
 import BaseApp from "Core/core/components/apps/base-app/base-app.component"
 import { RoutesHistoryProvider } from "shared/utils"
 import useAltLinkDownloadPreventer from "Core/core/components/use-alt-link-download-preventer.hook"
+import useBackForwardButtonPreventer from "Core/core/components/use-back-forward-button-preventer.hook"
 import { ApiDeviceModals } from "generic-view/feature"
 
 const BaseAppContainer: FunctionComponent = () => {
   useAltLinkDownloadPreventer()
+  useBackForwardButtonPreventer()
 
   return (
     <Router history={history}>

libs/core/core/components/apps/license-app.component.tsx

@@ -10,9 +10,11 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 import { LicenseUI } from "Core/settings/components/license/license-ui.component"
 import useAltLinkDownloadPreventer from "Core/core/components/use-alt-link-download-preventer.hook"
+import useBackForwardButtonPreventer from "Core/core/components/use-back-forward-button-preventer.hook"
 
 const LicenseApp: FunctionComponent = () => {
   useAltLinkDownloadPreventer()
+  useBackForwardButtonPreventer()
 
   return (
     <Router history={history}>

libs/core/core/components/apps/privacy-policy-app.component.tsx

@@ -10,9 +10,11 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 import { PrivacyPolicyUI } from "Core/settings/components"
 import useAltLinkDownloadPreventer from "Core/core/components/use-alt-link-download-preventer.hook"
+import useBackForwardButtonPreventer from "Core/core/components/use-back-forward-button-preventer.hook"
 
 const PrivacyPolicyApp: FunctionComponent = () => {
   useAltLinkDownloadPreventer()
+  useBackForwardButtonPreventer()
 
   return (
     <Router history={history}>

libs/core/core/components/apps/sar-app.component.tsx

@@ -10,9 +10,11 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import { URL_OVERVIEW } from "Core/__deprecated__/renderer/constants/urls"
 import SarComponent from "Core/overview/components/pure-system/sar.component"
 import useAltLinkDownloadPreventer from "Core/core/components/use-alt-link-download-preventer.hook"
+import useBackForwardButtonPreventer from "Core/core/components/use-back-forward-button-preventer.hook"
 
 const SarApp: FunctionComponent = () => {
   useAltLinkDownloadPreventer()
+  useBackForwardButtonPreventer()
 
   return (
     <Router history={history}>

libs/core/core/components/apps/terms-of-service-app.component.tsx

@@ -10,9 +10,11 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 import { TermsOfServiceUI } from "Core/settings/components"
 import useAltLinkDownloadPreventer from "Core/core/components/use-alt-link-download-preventer.hook"
+import useBackForwardButtonPreventer from "Core/core/components/use-back-forward-button-preventer.hook"
 
 const TermsOfServiceApp: FunctionComponent = () => {
   useAltLinkDownloadPreventer()
+  useBackForwardButtonPreventer()
 
   return (
     <Router history={history}>

libs/core/core/components/use-back-forward-button-preventer.hook.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { useCallback, useEffect } from "react"
+
+const useBackForwardButtonPreventer = () => {
+  const handleMouseUp = useCallback((event: MouseEvent) => {
+    if (event.button === 3 || event.button === 4) {
+      event.preventDefault()
+    }
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener("mouseup", handleMouseUp)
+    return () => document.removeEventListener("mouseup", handleMouseUp)
+  }, [handleMouseUp])
+}
+
+export default useBackForwardButtonPreventer