refactor(ui5-popover): improve layouting, styling and positioning (#779)

BREAKING CHANGE: stayOpenOnScroll is now removed

- Popover will no longer close when the browser is scrolled
and its parent (opener) is visible in the viewport.

Author: MapTo0

packages/base/src/UI5Element.js

@@ -470,7 +470,7 @@ class UI5Element extends HTMLElement {
 
 		const focusDomRef = this.getFocusDomRef();
 
-		if (focusDomRef) {
+		if (focusDomRef && typeof focusDomRef.focus === "function") {
 			focusDomRef.focus();
 		}
 	}

packages/main/package.json

@@ -109,7 +109,7 @@
     "@wdio/sync": "^5.12.1",
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chai": "^4.2.0",
-    "chromedriver": "^76.0.0",
+    "chromedriver": "^77.0.0",
     "clean-css": "^4.2.1",
     "copy-and-watch": "^0.1.2",
     "cpx": "^1.5.0",
@@ -153,6 +153,6 @@
   "resolutions": {
     "abstract-syntax-tree": "1.0.3",
     "dir-glob": "2.0.0",
-    "wdio-chromedriver-service/chromedriver": "^76.0.0"
+    "wdio-chromedriver-service/chromedriver": "^77.0.0"
   }
 }

packages/main/src/Input.hbs

@@ -11,6 +11,7 @@
 		<input id="{{_id}}-inner"
 			class="ui5-input-inner"
 			type="{{inputType}}"
+			inner-input
 			?disabled="{{disabled}}"
 			?readonly="{{_readonly}}"
 			?required="{{required}}"

packages/main/src/Input.js

@@ -445,7 +445,7 @@ class Input extends UI5Element {
 			- value of the host and the internal input should be differnt in case of actual input
 			- input is called when a key is pressed => keyup should not be called yet
 		*/
-		const skipFiring = (this.getInputDOMRef().value === this.value) && isIE() && !this._keyDown && this.placeholder;
+		const skipFiring = (this.getInputDOMRef().value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
 
 		!skipFiring && this.fireEventByAction(this.ACTION_USER_INPUT);
 

packages/main/src/MultiComboBox.hbs

@@ -20,13 +20,15 @@
 
 	<input id="ui5-multi-combobox-input"
 		value="{{value}}"
+		inner-input
 		placeholder="{{placeholder}}"
 		?disabled={{disabled}}
 		?readonly={{readonly}}
 		value-state="{{valueState}}"
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
-		@keydown="{{_keydown}}"
+		@keydown="{{_onkeydown}}"
+		@keyup="{{_onkeyup}}"
 		@focusin="{{_focusin}}"
 		@focusout="{{_focusout}}">
 	</input>

packages/main/src/MultiComboBox.js

@@ -4,6 +4,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isShow, isDown, isBackSpace } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import "./icons/slim-arrow-down.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
+import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -277,7 +278,20 @@ class MultiComboBox extends UI5Element {
 		const filteredItems = this._filterItems(value);
 		const oldValueState = this.valueState;
 
+		/* skip calling change event when an input with a placeholder is focused on IE
+			- value of the host and the internal input should be differnt in case of actual input
+			- input is called when a key is pressed => keyup should not be called yet
+		*/
+		const skipFiring = (this._inputDom.value === this.value) && isIE && !this._keyDown && !!this.placeholder;
+
+		if (skipFiring) {
+			event.preventDefault();
+
+			return;
+		}
+
 		if (this._validationTimeout) {
+			input.value = this._inputLastValue;
 			return;
 		}
 
@@ -289,6 +303,7 @@ class MultiComboBox extends UI5Element {
 				this.valueState = oldValueState;
 				this._validationTimeout = null;
 			}, 2000);
+
 			return;
 		}
 
@@ -330,7 +345,11 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
-	_keydown(event) {
+	_onkeyup() {
+		this._keyDown = false;
+	}
+
+	_onkeydown(event) {
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
 			this._togglePopover();
@@ -355,6 +374,8 @@ class MultiComboBox extends UI5Element {
 			this._tokenizer.tokens[lastTokenIndex].focus();
 			this._tokenizer._itemNav.currentIndex = lastTokenIndex;
 		}
+
+		this._keyDown = true;
 	}
 
 	_filterItems(value) {

packages/main/src/Popover.hbs

@@ -1,17 +1,27 @@
-{{>include "./Popup.hbs"}}
+<div class="ui5-popover-root" role="dialog" aria-modal="true" aria-labelledby="ui5-popover-header">
 
-<span class="ui5-popup-frame" @focusin="{{onfocusin}}">
-	<span id="{{_id}}-firstfe" tabindex="0" @focusin={{focusHelper.forwardToLast}}></span>	
-	<div style="{{styles.main}}" role="dialog" aria-modal="true" aria-labelledby="{{headerId}}" tabindex="-1" class="ui5-popup-root ui5-popover-root">
-			{{> header}}
-			<div id="{{_id}}-content" style="{{styles.content}}" class="ui5-popup-content">
-				<div class="ui5-popup-scroll">
-					<slot></slot>
-				</div>
-			</div>
-			{{> footer}}
-			<span id="{{_id}}-arrow" style="{{styles.arrow}}" class="ui5-popover-arr"></span>
+	<span class="ui5-popover-arr" style="{{styles.arrow}}"></span>
+
+	{{#if header.length }}
+		<div class="ui5-popover-header-root"  id="ui5-popover-header" role="toolbar">
+			<slot name="header"></slot>
 		</div>
-	<span id="{{_id}}-lastfe" tabindex="0" @focusin={{focusHelper.forwardToFirst}}></span>
-	<div tabindex="0" id="{{_id}}-blocklayer" style="{{styles.blockLayer}}" class="{{classes.blockLayer}}"></div>
-</span>
+	{{else}}
+		<h2 class="ui5-popup-header-text" id="ui5-popover-header">{{headerText}}</h2>
+	{{/if}}
+
+	<span class="first-fe" tabindex="0" @focusin={{forwardToLast}}></span>	
+
+	<div class="ui5-popover-content">
+		<slot></slot>
+	</div>
+
+	<span class="last-fe" tabindex="0" @focusin={{forwardToFirst}}></span>
+
+	{{#if footer.length }}
+		<div class="ui5-popover-footer-root" role="toolbar">
+			<slot name="footer"></slot>
+		</div>
+	{{/if}}
+
+</div>