fix(ui5-popover): fix infinite open/show loop (#9055)

fixes #9031
SAP · May 29, 2024 · a142caf · a142caf
1 parent 3e2b32e
commit a142caf
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -367,7 +367,7 @@ class Popover extends Popup {
 		this._show();
 	}
 
-	_show() {
+	async _show() {
 		super._show();
 
 		if (!this._opened) {
@@ -396,6 +396,7 @@ class Popover extends Popup {
 		}
 
 		if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect!)) {
+			await this._waitForDomRef();
 			return this.closePopup();
 		}
 

diff --git a/packages/main/src/ResponsivePopover.ts b/packages/main/src/ResponsivePopover.ts
@@ -91,9 +91,9 @@ class ResponsivePopover extends Popover {
 		}
 	}
 
-	_show() {
+	async _show() {
 		if (!isPhone()) {
-			super._show();
+			return super._show();
 		}
 	}
 

diff --git a/packages/main/test/specs/ComboBox.mobile.spec.js b/packages/main/test/specs/ComboBox.mobile.spec.js
@@ -57,6 +57,29 @@ describe("Basic mobile picker rendering and interaction", () => {
 
 		const dialogInput = await browser.$(`#placeholder_test`).shadow$("ui5-responsive-popover").$("[ui5-input]");
 		assert.strictEqual(await dialogInput.getAttribute("placeholder"), await combo.getAttribute("placeholder"), "Correct placeholder shown");
+
+		// close the suggestions
+		await browser.keys("Escape");
+	});
+
+	it("Should open and close the mobile picker with value state", async () => {
+		const comboBoxError = await browser.$("#value-state-error");
+
+		await comboBoxError.scrollIntoView();
+		await comboBoxError.click();
+
+		const dialogInput = await comboBoxError.shadow$("ui5-responsive-popover").$("[ui5-input]").shadow$("input");
+		await dialogInput.click();
+		await dialogInput.keys("A");
+
+		const popover = await comboBoxError.shadow$("ui5-responsive-popover");
+		assert.ok(await popover.hasAttribute("open"), "Suggestions are open");
+
+		// clear the input
+		await dialogInput.keys("Escape");
+		// close the suggestions
+		await browser.keys("Escape");
+		assert.notOk(await popover.hasAttribute("open"), "Suggestions are closed");
 	});
 });