fix(ui5-input): fix JS errors when open/close popups (#1811)

There are use cases when the user dynamically appends/removes the value state msg slot and we have to check if the value state msg popover is present before opening or closing it. FIXES: #1790
SAP · Jun 16, 2020 · 1129b36 · 1129b36
1 parent c4bbf6f
commit 1129b36
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -672,15 +672,17 @@ class Input extends UI5Element {
 	}
 
 	async openPopover() {
-		this._isPopoverOpen = true;
 		this.popover = await this._getPopover();
-		this.popover.openBy(this);
+		if (this.popover) {
+			this._isPopoverOpen = true;
+			this.popover.openBy(this);
+		}
 	}
 
 	closePopover() {
 		if (this.isOpen()) {
 			this._isPopoverOpen = false;
-			this.popover.close();
+			this.popover && this.popover.close();
 		}
 	}
 

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -41,17 +41,21 @@ <h3>Input in Compact</h3>
 
 	<h3> Input suggestions with ui5-suggestion-item</h3>
 
-	<div style="width: 200px">Input keyp</div>
-	<ui5-input id="keyupResult" style="width: 100%"></ui5-input> <br>
+	<div style="width: 200px">Test keyup</div>
+	<ui5-input id="keyupResult" style="width: 100%"></ui5-input>
+	<br><br>
 
-	<div style="width: 200px">Input suggestion-item-preview</div>
-	<ui5-input id="inputItemPreviewRes" style="width:100%"></ui5-input><br><br>
+	<div style="width: 200px">Test suggestion-item-preview</div>
+	<ui5-input id="inputItemPreviewRes" style="width:100%"></ui5-input>
+	<br><br>
 
-	<div style="width: 200px">mouseover on item</div>
-	<ui5-input id="mouseoverResult" style="width: 100%"></ui5-input> <br>
+	<div style="width: 200px">Test mouseover on item</div>
+	<ui5-input id="mouseoverResult" style="width: 100%"></ui5-input>
+	<br><br>
 
-	<div style="width: 200px">mouseout on item</div>
-	<ui5-input id="mouseoutResult" style="width:100%"></ui5-input><br>
+	<div style="width: 200px">Test mouseout on item</div>
+	<ui5-input id="mouseoutResult" style="width:100%"></ui5-input>
+	<br><br>
 
 	<ui5-input id="inputPreview" show-suggestions style="width: 200px">
 		<ui5-suggestion-item class="suggestionItem" text="Cozy"></ui5-suggestion-item>
@@ -342,7 +346,9 @@ <h3> Input with multiple icons</h3>
 
 		inputPreview.addEventListener("keyup", function (event) {
 			const item = event.target.previewItem;
-			keyupResult.value = "[key]: " + event.key +  " , [preview item]:" + (item && item.text);
+			const combination = event.key === "1" && event.shiftKey && event.ctrlKey;
+
+			keyupResult.value = combination ? "[ctr+shift+1] on item: " + (item && item.text) : event.key;
 		});
 
 		[].slice.call(document.querySelectorAll(".suggestionItem")).forEach(function(el) {