fix(popup): remove body styles in onExitDOM (#593)

SAP · Jun 28, 2019 · 410b8f6 · 410b8f6
1 parent de84636
commit 410b8f6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -148,8 +148,17 @@ function createBLyBackStyle() {
 
 	customBLyBackStyleInserted = true;
 
-	const stylesheet = document.styleSheets[0];
-	stylesheet.insertRule(".sapUiBLyBack {overflow: hidden;position: fixed;width:100%;height: 100%;}", 0);
+	const bodyStyleSheet = document.createElement("style");
+	bodyStyleSheet.type = "text/css";
+	bodyStyleSheet.innerHTML = `
+		.sapUiBLyBack {
+			width: 100%;
+			height: 100%;
+			position: fixed;
+			overflow: hidden;
+		}
+	`;
+	document.head.appendChild(bodyStyleSheet);
 }
 
 function updateBlockLayers() {
@@ -180,17 +189,24 @@ function updateBodyScrolling(hasModal) {
 	createBLyBackStyle();
 
 	if (hasModal) {
-		document.body.style.top = `-${window.pageYOffset}px`;
-		document.body.classList.add("sapUiBLyBack");
+		addBodyStyles();
 	} else {
-		document.body.classList.remove("sapUiBLyBack");
-		window.scrollTo(0, -parseFloat(document.body.style.top));
-		document.body.style.top = "";
+		removeBodyStyles();
 	}
-
 	isBodyScrollingDisabled = hasModal;
 }
 
+function addBodyStyles() {
+	document.body.style.top = `-${window.pageYOffset}px`;
+	document.body.classList.add("sapUiBLyBack");
+}
+
+function removeBodyStyles() {
+	document.body.classList.remove("sapUiBLyBack");
+	window.scrollTo(0, -parseFloat(document.body.style.top));
+	document.body.style.top = "";
+}
+
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -422,6 +438,10 @@ class Popup extends UI5Element {
 
 		this._lastFocusableElement = null;
 	}
+
+	onExitDOM() {
+		removeBodyStyles();
+	}
 }
 
 export default Popup;
diff --git a/packages/playground/webapp/www/home/core.css b/packages/playground/webapp/www/home/core.css
@@ -73,10 +73,6 @@
 	outline: 0 none
 }
 
-.sapUiBLyBack {
-	overflow: hidden
-}
-
 .sapUiPopupShield {
 	position: absolute
 }