feat(ui5-popup): custom popups work with focusable elements in the shadow root (#1844)

Author: vladitasev

packages/base/src/util/FocusableElements.js

@@ -1,6 +1,10 @@
 import isNodeHidden from "./isNodeHidden.js";
 import isNodeClickable from "./isNodeClickable.js";
 
+const isFocusTrap = el => {
+	return el.hasAttribute("data-ui5-focus-trap");
+};
+
 const getFirstFocusableElement = container => {
 	if (!container || isNodeHidden(container)) {
 		return null;
@@ -19,7 +23,10 @@ const getLastFocusableElement = container => {
 
 const findFocusableElement = (container, forward) => {
 	let child;
-	if (container.assignedNodes && container.assignedNodes()) {
+
+	if (container.shadowRoot) {
+		child = forward ? container.shadowRoot.firstChild : container.shadowRoot.lastChild;
+	} else if (container.assignedNodes && container.assignedNodes()) {
 		const assignedElements = container.assignedNodes();
 		child = forward ? assignedElements[0] : assignedElements[assignedElements.length - 1];
 	} else {
@@ -36,7 +43,7 @@ const findFocusableElement = (container, forward) => {
 			return null;
 		}
 
-		if (child.nodeType === 1 && !isNodeHidden(child)) {
+		if (child.nodeType === 1 && !isNodeHidden(child) && !isFocusTrap(child)) {
 			if (isNodeClickable(child)) {
 				return (child && typeof child.focus === "function") ? child : null;
 			}

packages/main/src/Popup.hbs

@@ -2,7 +2,7 @@
 
 	{{> beforeHeader}}
 
-	<span class="first-fe" tabindex="0" @focusin={{forwardToLast}}></span>
+	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>
 
 	{{> header}}
 
@@ -12,7 +12,7 @@
 
 	{{> footer}}
 
-	<span class="last-fe" tabindex="0" @focusin={{forwardToFirst}}></span>
+	<span class="last-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToFirst}}></span>
 
 </section>
 

packages/main/src/Popup.js

@@ -311,11 +311,11 @@ class Popup extends UI5Element {
 	}
 
 	/**
-	 * Sets "inline-block" display to the popup
+	 * Sets "block" display to the popup
 	 * @protected
 	 */
 	show() {
-		this.style.display = "inline-block";
+		this.style.display = "block";
 	}
 
 

packages/main/test/pages/Dialog.html

@@ -37,6 +37,8 @@
 	<ui5-button id="modals-open">Open Multiple modals</ui5-button>
 	<br>
 	<br>
+	<ui5-button id="empty-open">Open empty dialog (no focusable element)</ui5-button>
+	<br><br>
 
 	<ui5-block-layer></ui5-block-layer>
 
@@ -198,6 +200,8 @@
 		</ui5-list>
 	</ui5-popover>
 
+	<ui5-dialog id="empty-dialog">Empty</ui5-dialog>
+
 	<script>
 
 		let preventClosing = true;
@@ -248,7 +252,9 @@
 		bigDanger.addEventListener('click', function (event) {
 			bigDangerPop.openBy(bigDanger);
 		});
+
+		window["empty-open"].addEventListener("click", function (event) { window["empty-dialog"].open(); });
 	</script>
 </body>
 
-</html>
+</html>