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

Author: dimovpetar

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>

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

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>
 

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");