fix(ui5-busyindicator): prevent keyboard events propagation to controls (#1607)

Author: fifoosid

packages/main/src/BusyIndicator.hbs

@@ -1,7 +1,7 @@
 <div class="ui5-busyindicator-root">
 	<div class="ui5-busyindicator-wrapper">
 		{{#if active}}
-			<div class="ui5-busyindicator-dynamic-content" tabindex="0" role="progressbar" aria-valuemin="0" aria-valuemax="100" title="{{ariaTitle}}">
+			<div class="ui5-busyindicator-dynamic-content" role="progressbar" aria-valuemin="0" aria-valuemax="100" title="{{ariaTitle}}">
 				<div class="ui5-busyindicator-circle circle-animation-0"></div>
 				<div class="ui5-busyindicator-circle circle-animation-1"></div>
 				<div class="ui5-busyindicator-circle circle-animation-2"></div>

packages/main/src/BusyIndicator.js

@@ -95,6 +95,30 @@ class BusyIndicator extends UI5Element {
 		super();
 
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._preventHandler = this._preventEvent.bind(this);
+	}
+
+	onBeforeRendering() {
+		if (this.active) {
+			this.tabIndex = -1;
+		} else {
+			this.tabIndex = 0;
+		}
+	}
+
+	onEnterDOM() {
+		this.addEventListener("keyup", this._preventHandler, {
+			capture: true,
+		});
+
+		this.addEventListener("keydown", this._preventHandler, {
+			capture: true,
+		});
+	}
+
+	onExitDOM() {
+		this.removeEventListener("keyup", this._preventHandler, true);
+		this.removeEventListener("keydown", this._preventHandler, true);
 	}
 
 	static get metadata() {
@@ -123,6 +147,12 @@ class BusyIndicator extends UI5Element {
 	get ariaTitle() {
 		return this.i18nBundle.getText(BUSY_INDICATOR_TITLE);
 	}
+
+	_preventEvent(event) {
+		if (this.active) {
+			event.stopImmediatePropagation();
+		}
+	}
 }
 
 BusyIndicator.define();

packages/main/test/pages/BusyIndicator.html

@@ -112,6 +112,24 @@
 	<br>
 	<br>
 
+	<ui5-busyindicator id="busy-tree" style="width: 100%;">
+		<ui5-tree id="treeDynamic">
+			<div slot="header">
+				<ui5-title>Dynamic tree</ui5-title>
+			</div>
+
+			<ui5-tree-item text="Has preloaded children">
+				<ui5-tree-item text="Child 1"></ui5-tree-item>
+				<ui5-tree-item text="Child 2"></ui5-tree-item>
+			</ui5-tree-item>
+
+			<ui5-tree-item text="Has no children at all"></ui5-tree-item>
+
+			<ui5-tree-item id="dynamicNode" text="Has children, but not yet loaded" has-children></ui5-tree-item>
+		</ui5-tree>
+	</ui5-busyindicator>
+
+	<ui5-input value="0" id="tree-input"></ui5-input>
 
 	<script>
 		var busyIndocator = document.getElementById("busy-container");
@@ -132,6 +150,37 @@
 				busyIndocator.removeAttribute("active");
 			}, 2000);
 		});
+
+		var dynamicTree = document.getElementById("treeDynamic");
+		var busyIndicator = document.getElementById("busy-tree");
+		var input = document.getElementById("tree-input");
+		var inputValue = 0;
+
+		dynamicTree.addEventListener("ui5-itemToggle", function(event) {
+			var item = event.detail.item; // get the node that is toggled
+			console.log(item);
+			// Only for the dynamic node, only when it's empty
+			if (item.id === "dynamicNode" && item.children.length === 0) {
+				busyIndicator.active = true;
+				event.preventDefault(); // do not let the toggle button switch yet
+				setTimeout(function() {
+					var newItem = document.createElement("ui5-tree-item"); // Fetching from db....
+					newItem.text = "Node fetched from DB after 2 sec";
+					item.appendChild(newItem);
+					item.toggle(); // now manually switch
+					busyIndicator.active = false;
+				}, 2000);
+			}
+		});
+
+		dynamicTree.addEventListener("ui5-itemClick", function(event) {
+			var item = event.detail.item; // get the node that is toggled
+
+			// Only for the dynamic node, only when it's empty
+			if (item.id === "dynamicNode") {
+				input.value = ++inputValue;
+			}
+		});
 	</script>
 </body>
 

packages/main/test/specs/BusyIndicator.spec.js

@@ -0,0 +1,18 @@
+const assert = require("chai").assert;
+
+
+describe("BusyIndicator general interaction", () => {
+	browser.url("http://localhost:8080/test-resources/pages/BusyIndicator.html");
+
+	it("tests event propagation", () => {
+		const busyIndicator = browser.$("#busy-tree");
+		const dynamicItem = busyIndicator.$("ui5-tree").shadow$("ui5-list").$$("ui5-li-tree")[2].shadow$(".ui5-li-tree-toggle-box");
+		const input = browser.$("#tree-input");
+
+		dynamicItem.click();
+		dynamicItem.keys("Space");
+
+		assert.strictEqual(input.getProperty("value"), "0", "itemClick is not thrown");
+	});
+
+});