From f2f388976b2bb7132d8351da276666377246a23e Mon Sep 17 00:00:00 2001
From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com>
Date: Thu, 11 Feb 2021 15:12:24 +0200
Subject: [PATCH] fix(ui5-popup): prevent focus on elements below block layer
 (#2800)

Problem: When element inside the popup, which can't get focus is clicked, the focus goes on the body element.
Then any element below the block layer can be focused.
Solution: Don't let the focus leave the popup.

Fixes: #2626
---
 packages/main/src/Popup.hbs              |  1 +
 packages/main/src/Popup.js               |  7 +++++++
 packages/main/test/pages/Popover.html    | 14 ++++++++++++++
 packages/main/test/specs/Popover.spec.js | 12 ++++++++++++
 4 files changed, 34 insertions(+)

diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs
index a03f3a45848f..25f1422a4441 100644
--- a/packages/main/src/Popup.hbs
+++ b/packages/main/src/Popup.hbs
@@ -8,6 +8,7 @@
 	dir="{{dir}}"
 	tabindex="-1"
 	@keydown={{_onkeydown}}
+	@focusout={{_onfocusout}}
 >
 
 	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>
diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
index 4339da8fb6f6..fcafb4de7021 100644
--- a/packages/main/src/Popup.js
+++ b/packages/main/src/Popup.js
@@ -263,6 +263,13 @@ class Popup extends UI5Element {
 		}
 	}
 
+	_onfocusout(e) {
+		// relatedTarget is the element, which will get focus. If no such element exists, focus the root
+		if (!e.relatedTarget) {
+			this._root.focus();
+		}
+	}
+
 	/**
 	 * Focus trapping
 	 * @private
diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
index 0d7dd0719d77..4eb27c419759 100644
--- a/packages/main/test/pages/Popover.html
+++ b/packages/main/test/pages/Popover.html
@@ -384,6 +384,15 @@
 
 	<br>
 
+	<ui5-button id="btnOpenPopoverWithDiv">Open Popover with div Inside</ui5-button>
+
+	<ui5-popover id="popWithDiv" header-text="Newsletter subscription" modal>
+		<div id="divContent">I'm a div, which can't get focus. Click me and see where focus goes.</div>
+		<div slot="footer" class="popover-footer">
+			<ui5-button design="Emphasized">Subscribe</ui5-button>
+		</div>
+	</ui5-popover>
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.openBy(btn);
@@ -488,6 +497,11 @@
 
 			popover.openBy(btnOpenDynamic);
 		});
+
+		btnOpenPopoverWithDiv.addEventListener("click", function (event) {
+			popWithDiv.openBy(event.target);
+		});
+
 	</script>
 </body>
 
diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
index 5d0e38b8455c..56f19d0cef0d 100644
--- a/packages/main/test/specs/Popover.spec.js
+++ b/packages/main/test/specs/Popover.spec.js
@@ -251,6 +251,18 @@ describe("Popover general interaction", () => {
 		assert.ok(activeElementId, popoverId, "Popover remains focused");
 	});
 
+	it("tests focus when content, which can't be focused is clicked", () => {
+		browser.url("http://localhost:8080/test-resources/pages/Popover.html");
+
+		$("#btnOpenPopoverWithDiv").click();
+		$("#divContent").click();
+
+		const popoverId = "popWithDiv";
+		const activeElementId = $(browser.getActiveElement()).getAttribute("id");
+
+		assert.strictEqual(activeElementId, popoverId, "Popover is focused");
+	});
+
 	it("tests that dynamically created popover is opened", () => {
 		browser.url("http://localhost:8080/test-resources/pages/Popover.html");