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
SAP · Aug 6, 2021 · 1eb7206 · 1eb7206
1 parent 9ee7ea5
commit 1eb7206
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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");
+
+	});
 });