fix(ui5-list): fix JS error on focusin (#2720)

Fixe a JS error that used to thrown upon "focusin" when non-existing DOM elements have been accessed. Those DOM elements are not rendered when there are no list items, which is the example in the referenced issue.

FIXES: #2717

Author: ilhan007

packages/main/src/List.js

@@ -586,12 +586,14 @@ class List extends UI5Element {
 
 	isForwardElement(node) {
 		const nodeId = node.id;
+		const afterElement = this.getAfterElement();
+		const beforeElement = this.getBeforeElement();
 
-		if (this._id === nodeId || this.getBeforeElement().id === nodeId) {
+		if (this._id === nodeId || (beforeElement && beforeElement.id === nodeId)) {
 			return true;
 		}
 
-		return this.getAfterElement().id === nodeId;
+		return afterElement && afterElement.id === nodeId;
 	}
 
 	onItemFocused(event) {

packages/main/test/pages/List_test_page.html

@@ -174,6 +174,20 @@ <h2 id="testHeader">Test aria</h2>
 	</ui5-list>
 
 	<ui5-input value="0" id="customListItemEvents"></ui5-input>
+	<br />
+	<br />
+	<ui5-button id="btnOpenPopup">Open popup with List</ui5-button>
+	<ui5-responsive-popover id="popup" placement-type="Bottom" style="width: 300px;height: 18rem;">
+		<ui5-list>
+			<div slot="header">
+				<ui5-button id="btnInHeader" icon="refresh" />
+			</div>
+		</ui5-list>
+
+		<ui5-list style="height: 15rem" infinite-scroll no-data-text="No data">
+			<ui5-li>Test</ui5-li>
+		</ui5-list>
+	</ui5-responsive-popover>
 
 	<script>
 		'use strict';
@@ -249,9 +263,13 @@ <h2 id="testHeader">Test aria</h2>
 			customListItemEventsValue = 0,
 			customListItemEventsInput = document.getElementById("customListItemEvents");
 
-		ui5List.addEventListener("ui5-item-click", (event) => {
+		ui5List.addEventListener("ui5-item-click", function(event) {
 			customListItemEventsInput.value = ++customListItemEventsValue;
 		});
+
+		btnOpenPopup.addEventListener("click", function() {
+			popup.openBy(btnOpenPopup);
+		});
 	</script>
 </body>
 </html>

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

@@ -303,4 +303,12 @@ describe("List Tests", () => {
 
 		assert.strictEqual(input.getProperty("value"), "0", "item-click event is not fired when the button is pressed.");
 	});
+
+	it("Popover with List opens without errors", () => {
+		const btnPopupOpener = $("#btnOpenPopup");
+		const btnInListHeader = $("#btnInHeader");
+
+		btnPopupOpener.click();
+		assert.strictEqual(btnInListHeader.isFocused(), true, "The List header btn is focused.");
+	});
 });