fix(ui5-list): prevent load-more on initial intersection (#3105)

This is a change already merged in release-0.29, because of a tight deadline, set by stakeholders. Now we ensure that the issue is fixed in the future versions. The commit in the release-0.29 branch is the following: af2070f

And the change fixes the case when the List does not actually overflow, the bottom most part of the List is visible and the IntersectionObserver detects that the bottom of the List is reached. What happens in the apps is that the List fires "load-more" just before the items that the app wants to show initially are actually rendered, which results in additional loading, not due to user scroll.

Author: ilhan007

packages/main/src/List.js

@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import { isTabNext, isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
@@ -424,6 +425,10 @@ class List extends UI5Element {
 
 		this._handleResize = this.checkListInViewport.bind(this);
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+
+		// Indicates the List bottom most part has been detected by the IntersectionObserver
+		// for the first time.
+		this.initialIntersection = true;
 	}
 
 	onExitDOM() {
@@ -551,8 +556,9 @@ class List extends UI5Element {
 		this._previouslySelectedItem = null;
 	}
 
-	observeListEnd() {
+	async observeListEnd() {
 		if (!this.listEndObserved) {
+			await renderFinished();
 			this.getIntersectionObserver().observe(this.listEndDOM);
 			this.listEndObserved = true;
 		}
@@ -567,9 +573,15 @@ class List extends UI5Element {
 	}
 
 	onInteresection(entries) {
-		if (entries.some(entry => entry.isIntersecting)) {
-			debounce(this.loadMore.bind(this), INFINITE_SCROLL_DEBOUNCE_RATE);
+		if (this.initialIntersection) {
+			this.initialIntersection = false;
+			return;
 		}
+		entries.forEach(entry => {
+			if (entry.isIntersecting) {
+				debounce(this.loadMore.bind(this), INFINITE_SCROLL_DEBOUNCE_RATE);
+			}
+		});
 	}
 
 	/*

packages/main/test/pages/List_test_page.html

@@ -26,6 +26,20 @@
 		<ui5-li id="lastItem">Last Item</ui5-li>
 	</ui5-list>
 	<input id="loadMoreResult" value="0"/>
+	<br><br><br>
+
+	<ui5-title>List growing="Scroll" items don't overflow initially</ui5-title>
+
+	<ui5-input id="growingScrollTestCounter" value="0"></ui5-input>
+	<section style="max-height: 20rem; overflow: auto;">
+		<ui5-list id="growingScrollTest" growing="Scroll">
+			<ui5-li-groupheader>New Items</ui5-li-groupheader>
+		</ui5-list>
+	</section>
+
+	<br><br><br>
+
+	
 	<br/>
 	<ui5-list id="listEvents" mode="SingleSelectEnd">
 		<ui5-li id="country1">Argentina</ui5-li>
@@ -38,6 +52,7 @@
 	<ui5-input id="selectionChangeResultField" placeholder="selectionChange result"></ui5-input>
 	<ui5-input id="selectionChangeResultPreviousItemsParameter" placeholder="selectionChange previousSelection result"></ui5-input>
 
+	<br><br><br>
 	<ui5-list id="listEvents2" mode="MultiSelect">
 		<ui5-li id="country11">Argentina</ui5-li>
 		<ui5-li id="country22" selected >Bulgaria</ui5-li>
@@ -48,6 +63,7 @@
 	<ui5-input id="itemPressSelectedResultField2" placeholder="itemPress selected result"></ui5-input>
 	<ui5-input id="selectionChangeResultField2" placeholder="selectionChange result"></ui5-input>
 
+	<br><br><br>
 	<ui5-list id="list1" header-text="API: GroupHeaderListItem">
 		<ui5-li-groupheader>New Items</ui5-li-groupheader>
 		<ui5-li image="./img/HT-1000.jpg" >Laptop HP</ui5-li>
@@ -277,6 +293,12 @@ <h2 id="testHeader">Test aria</h2>
 		btnOpenPopup.addEventListener("click", function() {
 			popup.openBy(btnOpenPopup);
 		});
+
+
+		var groiwngScrollTestCounter = 0;
+		growingScrollTest.addEventListener("ui5-loadMore", function(e) {
+			growingScrollTestCounter.value= ++groiwngScrollTestCounter;
+		});
 	</script>
 </body>
 </html>

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

@@ -230,6 +230,11 @@ describe("List Tests", () => {
 		assert.ok(firstListItem.isFocused(), "First item remains focussed");
 	});
 
+	it("tests 'loadMore' event not fired initially when the list did not overflow", () => {
+		const loadMoreResult = $("#growingScrollTestCounter");
+		assert.strictEqual(loadMoreResult.getAttribute("value"), "0", "The event loadMore has not been fired.");
+	});
+
 	it("tests 'loadMore' event fired upon infinite scroll", () => {
 		const btn = $("#btnTrigger");
 		const loadMoreResult = $("#loadMoreResult");