From 1eb72069dd1a8e329e990e7223e56579da9ed2f9 Mon Sep 17 00:00:00 2001
From: kskondov <konstantin.kondov@sap.com>
Date: Fri, 6 Aug 2021 15:19:45 +0300
Subject: [PATCH] feat(ui5-responsive-popover): add prevent initial focus
 parameter to showAt method (#3595)

New "preventInitialFocus" parameter is added to the "showAt" method to prevent the Responsive Popover from applying an initial focus when needed.

Fixes: #3473
---
 packages/main/src/ResponsivePopover.js         |  5 +++--
 .../main/test/pages/ResponsivePopover.html     | 17 +++++++++++++++++
 .../main/test/specs/ResponsivePopover.spec.js  | 18 ++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
index 1aeeba92732f..b8b96beb9ae0 100644
--- a/packages/main/src/ResponsivePopover.js
+++ b/packages/main/src/ResponsivePopover.js
@@ -116,9 +116,10 @@ class ResponsivePopover extends Popover {
 	/**
 	 * Opens popover on desktop and dialog on mobile.
 	 * @param {HTMLElement} opener the element that the popover is opened by
+	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popup
 	 * @public
 	 */
-	open(opener) {
+	open(opener, preventInitialFocus = false) {
 		this.style.display = this._isPhone ? "contents" : "";
 
 		if (this.isOpen() || (this._dialog && this._dialog.isOpen())) {
@@ -131,7 +132,7 @@ class ResponsivePopover extends Popover {
 				this._minWidth = Math.max(POPOVER_MIN_WIDTH, opener.getBoundingClientRect().width);
 			}
 
-			this.openBy(opener);
+			this.openBy(opener, preventInitialFocus);
 		} else {
 			this.style.zIndex = getNextZIndex();
 			this._dialog.open();
diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
index 05f828954b7e..00e820537aec 100644
--- a/packages/main/test/pages/ResponsivePopover.html
+++ b/packages/main/test/pages/ResponsivePopover.html
@@ -104,6 +104,16 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		<div>text</div>
 	</ui5-responsive-popover>
 
+	<ui5-button id="btnInitialFocus">Open RP and Focus</ui5-button>
+	<ui5-responsive-popover id="simpleRPInitialFocus">
+		Content
+	</ui5-responsive-popover>
+
+	<ui5-button id="btnInitialFocusPrevented">Open RP and prevent initial focus</ui5-button>
+	<ui5-responsive-popover id="simpleRPInitialFocusPrevented">
+		Content
+	</ui5-responsive-popover>
+
 	<script>
 		btnOpen.addEventListener("click", function(event) {
 			respPopover.open(btnOpen);
@@ -137,6 +147,13 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 			rpTopWithArrow.open(btnRpTopWithArrow);
 		});
 
+		btnInitialFocus.addEventListener("click", function(event) {
+			simpleRPInitialFocus.open(event.target, false);
+		});
+
+		btnInitialFocusPrevented.addEventListener("click", function(event) {
+			simpleRPInitialFocusPrevented.open(event.target, true);
+		});
 	</script>
 </body>
 </html>
diff --git a/packages/main/test/specs/ResponsivePopover.spec.js b/packages/main/test/specs/ResponsivePopover.spec.js
index 2d0a3a8f6c42..850b84c62b4a 100644
--- a/packages/main/test/specs/ResponsivePopover.spec.js
+++ b/packages/main/test/specs/ResponsivePopover.spec.js
@@ -30,4 +30,22 @@ describe("ResponsivePopover general interaction", () => {
 		assert.ok(popover.isDisplayedInViewport(), "ResponsivePopover is opened.");
 		assert.ok(!header.isExisting(), "Header is not displayed.");
 	});
+
+	it("Initial focus prevented", () => {
+		const btnOpenPopover = $("#btnInitialFocus");
+		btnOpenPopover.click();
+
+		const activeElementId = $(browser.getActiveElement()).getAttribute("id");
+		assert.strictEqual(activeElementId, "simpleRPInitialFocus", "Initial focus is not prevented");
+
+	});
+
+	it("Initial focus not prevented", () => {
+		const btnOpenPopover = $("#btnInitialFocusPrevented");
+		btnOpenPopover.click();
+
+		const activeElementId = $(browser.getActiveElement()).getAttribute("id");
+		assert.strictEqual(activeElementId, "btnInitialFocusPrevented", "Initial focus is prevented");
+
+	});
 });