From 23071282e4fb5051da5197767428949e343a9adc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 4 Sep 2018 23:42:49 +0100
Subject: [PATCH] fix(ui): add body-scroll-lock to prevent body scrolling when
 modal is open on touch devices

---
 ui/package-lock.json                                  |  5 +++++
 ui/package.json                                       |  1 +
 ui/src/Components/MainModal/MainModalContent.js       | 10 ++++++++++
 ui/src/Components/SilenceModal/SilenceModalContent.js | 10 ++++++++++
 4 files changed, 26 insertions(+)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 8c85d9509..eef12a0d2 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1682,6 +1682,11 @@
         }
       }
     },
+    "body-scroll-lock": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.5.7.tgz",
+      "integrity": "sha512-4K/lJvvDkACVb62zSl/L88I8Hht15yO0wkMZeZJTbRjq46wx+TBNd7SNpQ3JF3yFSoIPd2j8t3C4pOKal3T4vg=="
+    },
     "bonjour": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index a14933ea2..5192cacca 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,6 +9,7 @@
     "@fortawesome/free-regular-svg-icons": "5.3.1",
     "@fortawesome/free-solid-svg-icons": "5.3.1",
     "@fortawesome/react-fontawesome": "0.1.2",
+    "body-scroll-lock": "2.5.7",
     "bootstrap": "4.1.3",
     "bootswatch": "4.1.3",
     "copy-to-clipboard": "3.0.8",
diff --git a/ui/src/Components/MainModal/MainModalContent.js b/ui/src/Components/MainModal/MainModalContent.js
index 1784979b6..c9468bb82 100644
--- a/ui/src/Components/MainModal/MainModalContent.js
+++ b/ui/src/Components/MainModal/MainModalContent.js
@@ -5,6 +5,8 @@ import PropTypes from "prop-types";
 import { observer } from "mobx-react";
 import { observable, action } from "mobx";
 
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { Configuration } from "./Configuration";
@@ -49,6 +51,14 @@ const MainModalContent = observer(
       { setTab: action.bound }
     );
 
+    componentDidMount() {
+      disableBodyScroll(document.querySelector(".modal"));
+    }
+
+    componentWillUnmount() {
+      enableBodyScroll(document.querySelector(".modal"));
+    }
+
     render() {
       const { alertStore, settingsStore, onHide } = this.props;
 
diff --git a/ui/src/Components/SilenceModal/SilenceModalContent.js b/ui/src/Components/SilenceModal/SilenceModalContent.js
index 59295e369..7ed94b95b 100644
--- a/ui/src/Components/SilenceModal/SilenceModalContent.js
+++ b/ui/src/Components/SilenceModal/SilenceModalContent.js
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 
 import { observer } from "mobx-react";
 
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+
 import { SilenceForm } from "./SilenceForm";
 import { SilenceSubmitController } from "./SilenceSubmitController";
 
@@ -14,6 +16,14 @@ const SilenceModalContent = observer(
       silenceFormStore: PropTypes.object.isRequired
     };
 
+    componentDidMount() {
+      disableBodyScroll(document.querySelector(".modal"));
+    }
+
+    componentWillUnmount() {
+      enableBodyScroll(document.querySelector(".modal"));
+    }
+
     render() {
       const { alertStore, silenceFormStore } = this.props;