fix(ui5-datetime-picker): fix scrollbar issue in IE11 (#2154)

* DateTimePicker - fixed scrollbar issue in IE11 * lint fix * fixing comments * fixing comments
SAP · Sep 1, 2020 · 306572f · 306572f
1 parent 3d4cc0c
commit 306572f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -11,7 +11,7 @@ import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDat
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
 import { isShow, isF4 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/icons/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
@@ -661,6 +661,10 @@ class DatePicker extends UI5Element {
 		return this.phone;
 	}
 
+	get _isIE() {
+		return isIE();
+	}
+
 	getFormat() {
 		if (this._isPattern) {
 			this._oDateFormat = DateFormat.getInstance({

diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
@@ -4,6 +4,7 @@
 	stay-open-on-scroll="{{_respPopoverConfig.stayOpenOnScroll}}"
 	placement-type="Bottom"
 	horizontal-align="Left"
+	?disable-scrolling="{{_isIE}}"
 	no-arrow
 	with-padding
 	no-stretch

diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -129,6 +129,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the content is scrollable.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @private
+		 */
+		disableScrolling: {
+			type: Boolean,
+		},
+
 		/**
 		 * Sets the X translation of the arrow
 		 *

diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -80,3 +80,7 @@
 :host(:not([header-text])) .ui5-popup-header-text {
     display: none;
 }
+
+:host([disable-scrolling]) .ui5-popup-content {
+    overflow: hidden;
+}