fix(ui5-responsive-popover): set z-index on phone (#1303)

**Issue** - when a component, that opens a dialog on phone, such as Select, DatePicker, ComboBox, MultiComboBox is opened within Dialog, it remains invisible, because the Dialog remains on top. - when such component opens a dialog on phone, all icons on the page are visible, but should not **Solution** set z-index on the ui5-responsive-popover tag (on desktop it relies on the ui5-popover to handle that)
SAP · Mar 16, 2020 · a38b605 · a38b605
1 parent 85f01d7
commit a38b605
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
@@ -1,5 +1,6 @@
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getNextZIndex } from "./popup-utils/PopupUtils.js";
 import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
 import Popover from "./Popover.js";
 import Dialog from "./Dialog.js";
@@ -98,6 +99,7 @@ class ResponsivePopover extends Popover {
 
 			this.openBy(opener);
 		} else {
+			this.style.zIndex = getNextZIndex();
 			this._dialog.open();
 		}
 	}

diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -33,8 +33,8 @@
 			show-exceeded-text>
 		</ui5-textarea>
 		<ui5-select id="mySelect">
-			<ui5-option selected>Cozy</ui5-option>
-			<ui5-option selected>Compact</ui5-option>
+			<ui5-option >Cozy</ui5-option>
+			<ui5-option >Compact</ui5-option>
 			<ui5-option selected>Condensed</ui5-option>
 		</ui5-select>
 		<div slot="footer" style="display: flex; align-items: center;padding: 0.25rem 0.5rem">

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -2,9 +2,9 @@
 <html style="height: 100%">
 
 <head>
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta charset="utf-8">
-
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Popover</title>
 
 	<script data-ui5-config type="application/json">

diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
@@ -72,6 +72,28 @@
 		</div>
 	</ui5-responsive-popover>
 
+	<h2> Inputs based component that opens popover/dialog within dialog</h2>
+	<ui5-button id="btnOpenDialog" design="Emphasized" icon="employee">Open Dialog</ui5-button>
+	<ui5-dialog id="dialog" header-text="Dialog" stretch>
+		<ui5-select id="mySelect">
+			<ui5-option >Cozy</ui5-option>
+			<ui5-option >Compact</ui5-option>
+			<ui5-option selected>Condensed</ui5-option>
+		</ui5-select>
+		<ui5-combobox>
+			<ui5-cb-item text="Algeria"></ui5-cb-item>
+			<ui5-cb-item text="Argentina"></ui5-cb-item>
+			<ui5-cb-item text="Australia"></ui5-cb-item>
+		</ui5-combobox>
+		<ui5-multi-combobox>
+			<ui5-mcb-item text="Cosy"></ui5-mcb-item>
+			<ui5-mcb-item text="Compact"></ui5-mcb-item>
+			<ui5-mcb-item text="Condensed"></ui5-mcb-item>
+			<ui5-mcb-item text="Longest word in the world"></ui5-mcb-item>
+		</ui5-multi-combobox>
+		<ui5-datepicker></ui5-datepicker>
+	</ui5-dialog>
+
 	<script>
 		btnOpen.addEventListener("click", function(event) {
 			respPopover.open(btnOpen);
@@ -93,6 +115,9 @@
 		btnClose3.addEventListener("click", function(event) {
 			respPopover3.close();
 		});
+		btnOpenDialog.addEventListener('click', function (event) {
+			dialog.open();
+		});
 	</script>
 </body>
 </html>