Merge pull request #93 from prymitive/body-scroll-lock

fix(ui): add body-scroll-lock to prevent body scrolling when modal is…

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",

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",

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;
 

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;