fix(ui5-input): open popup after toggling show-suggestions

packages/main/src/features/InputSuggestions.ts

@@ -251,19 +251,21 @@ class Suggestions {
 		return sc.offsetHeight < sc.scrollHeight;
 	}
 
-	open() {
+	async open() {
 		this._getComponent().open = true;
 		this._beforeOpen();
 
-		this.responsivePopover!.showAt(this._getComponent());
+		this.responsivePopover = await this._getSuggestionPopover();
+
+		this.responsivePopover.showAt(this._getComponent());
 	}
 
 	async close(preventFocusRestore = false) {
 		const selectedItem = this._getItems() && this._getItems()[this.selectedItemIndex];
 
 		this._getComponent().open = false;
 		this.responsivePopover = await this._getSuggestionPopover();
-		this.responsivePopover.close(false, false, preventFocusRestore);
+		this.responsivePopover?.close(false, false, preventFocusRestore);
 
 		if (selectedItem && selectedItem.focused) {
 			selectedItem.focused = false;
@@ -344,14 +346,14 @@ class Suggestions {
 
 	async _attachItemsListeners() {
 		const list = await this._getList();
-		list.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
-		list.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
-		list.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
-		list.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
-		list.removeEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
-		list.addEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
-		list.removeEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
-		list.addEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
+		list?.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
+		list?.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
+		list?.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
+		list?.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
+		list?.removeEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
+		list?.addEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
+		list?.removeEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
+		list?.addEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
 	}
 
 	_attachPopupListeners() {
@@ -575,23 +577,19 @@ class Suggestions {
 
 	async _getList() {
 		this.responsivePopover = await this._getSuggestionPopover();
-		return this.responsivePopover.querySelector<List>("[ui5-list]")!;
+		return this.responsivePopover?.querySelector<List>("[ui5-list]");
 	}
 
 	async _getListWidth() {
 		const list = await this._getList();
-		return list.offsetWidth;
+		return list?.offsetWidth;
 	}
 
 	_getRealItems() {
 		return this._getComponent().getSlottedNodes<SuggestionItem>(this.slotName);
 	}
 
 	async _getSuggestionPopover() {
-		if (this.responsivePopover) {
-			return this.responsivePopover;
-		}
-
 		const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
 		this.responsivePopover = staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
 		return this.responsivePopover;

packages/main/test/pages/Input.html

@@ -421,6 +421,8 @@ <h3>Inputs with clear icon</h3>
 			<ui5-suggestion-item text="text 4"></ui5-suggestion-item>
 			<ui5-suggestion-item text="text 5"></ui5-suggestion-item>
 		</ui5-input>
+
+		<ui5-button id="toggle-suggestions">Toggle show-suggestions</ui5-button>
 		<br />
 	</div>
 
@@ -788,6 +790,11 @@ <h3>Input - change event handling</h3>
 			const inputNumber3ChangeCount = document.getElementById("input-number3-change-count");
 			inputNumber3ChangeCount.value = (parseInt(inputNumber3ChangeCount.value) + 1).toString();
 		});
+
+		document.getElementById("toggle-suggestions").addEventListener("click", () => {
+			const input = document.getElementById("clear-input-suggestions");
+			input.toggleAttribute("show-suggestions");
+		});
 	</script>
 </body>
 </html>

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

@@ -1154,6 +1154,24 @@ describe("Input general interaction", () => {
 
 		assert.strictEqual(await input.getValue(), "Test", "The value is not cleared");
 	});
+
+	it("Tests if toggling of show-suggestions attribute works correctly", async () => {
+		const input = await $("#clear-input-suggestions");
+		const button = await $("#toggle-suggestions");
+
+		await button.click();
+		await button.click();
+
+		await input.click();
+		await input.keys("a");
+
+		// check if popup is open
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#clear-input-suggestions");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+		// popover should be open
+		assert.ok(await popover.isDisplayedInViewport(), "The popover is visible");
+	});
 });
 
 describe("Input arrow navigation", () => {