fix(ui5-responsive-popover): fix open/close state, when initially open (#12236)

fixes: #12225

Author: duygu-rmdn

packages/main/cypress/specs/ResponsivePopover.mobile.cy.tsx

@@ -4,7 +4,7 @@ import Input from "../../src/Input.js";
 import Label from "../../src/Label.js";
 
 describe("ResponsivePopover mobile general interaction", () => {
-	before(() => {
+	beforeEach(() => {
 		cy.ui5SimulateDevice();
 	});
 
@@ -21,6 +21,18 @@ describe("ResponsivePopover mobile general interaction", () => {
 			.find("[ui5-dialog]")
 			.should("be.visible");
 	});
+
+	it("tests showing of the dialog on phone", () => {
+		cy.mount(<ResponsivePopover open={true} />);
+
+		cy.get("[ui5-responsive-popover]")
+			.shadow()
+			.find("[ui5-dialog]")
+			.should("be.visible");
+
+		cy.get("[ui5-responsive-popover]")
+			.should("not.be.visible");
+	});
 });
 
 describe("Accessibility", () => {

packages/main/src/Popup.ts

@@ -290,13 +290,17 @@ abstract class Popup extends UI5Element {
 
 		this.tabIndex = -1;
 
+		this.handleOpenOnEnterDOM();
+
+		this.setAttribute("data-sap-ui-fastnavgroup-container", "true");
+		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
+	}
+
+	handleOpenOnEnterDOM() {
 		if (this.open) {
 			this.showPopover();
 			this.openPopup();
 		}
-
-		this.setAttribute("data-sap-ui-fastnavgroup-container", "true");
-		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
 	}
 
 	onExitDOM() {

packages/main/src/ResponsivePopover.ts

@@ -89,6 +89,13 @@ class ResponsivePopover extends Popover {
 		}
 	}
 
+	handleOpenOnEnterDOM() {
+		if (this.open && !isPhone()) {
+			this.showPopover();
+			this.openPopup();
+		}
+	}
+
 	_dialogCloseButtonClick() {
 		this.closePopup();
 	}