chore(ui5-input): add isSuggestionsScrollable method (#1907)

Add a method that returns if the suggestions pop up is currently scrollable or not.
Note: the method is async.
Note: you need to call the method after the DOM is updated, othwewise you might get wrong result.

FIXES: #1902

packages/main/src/Input.js

@@ -846,6 +846,20 @@ class Input extends UI5Element {
 		return this.suggestionItems[key];
 	}
 
+	/**
+	 * Returns if the suggestions popover is scrollable.
+	 * The method returns <code>Promise</code> that resolves to true,
+	 * if the popup is scrollable and false otherwise.
+	 * @returns {Promise}
+	 */
+	isSuggestionsScrollable() {
+		if (!this.Suggestions) {
+			return Promise.resolve(false);
+		}
+
+		return this.Suggestions._isScrollable();
+	}
+
 	getInputId() {
 		return `${this._id}-inner`;
 	}

packages/main/src/features/InputSuggestions.js

@@ -102,6 +102,11 @@ class Suggestions {
 		}
 	}
 
+	async _isScrollable() {
+		const sc = await this._getScrollContainer();
+		return sc.offsetHeight < sc.scrollHeight;
+	}
+
 	async open() {
 		this.responsivePopover = await this._respPopover();
 		this._beforeOpen();

packages/main/test/pages/Input.html

@@ -308,7 +308,7 @@ <h3> Test scroll pos</h3>
 
 		var suggestionSelectedCounterWithGrouping = 0;
 
-		var suggest = function (event) {
+		var suggest = async function (event) {
 			var input = event.target;
 			var value = input.value;
 			var suggestionItems = [];
@@ -336,6 +336,14 @@ <h3> Test scroll pos</h3>
 			});
 
 			labelLiveChange.innerHTML = "Event [input] :: " + value;
+
+			// wait the DOM update
+			await window.RenderScheduler.whenFinished();
+
+			// check if the suggestions popup is scrollable
+			const scrollable = await input.isSuggestionsScrollable();
+
+			console.log("Suggestions are scrollable", scrollable);
 		};
 
 		input.addEventListener("ui5-input", suggest);

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

@@ -143,12 +143,11 @@ describe("Input general interaction", () => {
 		const input = $("#scrollInput").shadow$("input");
 		const scrollResult = $("#scrollResult");
 
-		// act
-		// open suggestions
+		// act - open suggestions
 		input.click();
 		input.keys("a");
 
-		// scroll with keyboard
+		// act - scroll with keyboard
 		input.keys("ArrowUp");
 		input.keys("ArrowUp");
 		input.keys("ArrowUp");
@@ -157,7 +156,15 @@ describe("Input general interaction", () => {
 		const scrollTop = scrollResult.getProperty("value");
 		assert.ok(scrollTop > 0, "The suggestion-scroll event fired");
 
-		input.keys("Enter"); // close suggestions
+		// assert isSuggestionsScrollable
+		const suggestionsScrollable = browser.execute(async () => {
+			const input = document.getElementById("scrollInput");
+			return (await input.isSuggestionsScrollable());
+		});
+		assert.equal(suggestionsScrollable, true, "The suggestions popup is scrolalble");
+
+		// close suggestions
+		input.keys("Enter"); 
 	});
 
 	it("handles suggestions", () => {