From 54e02f13a1ce2b8607135d44c91946ae81ffb5c9 Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Tue, 14 Apr 2020 16:15:18 +0300 Subject: [PATCH 01/13] feat(ui5-datepicker): implement valuestatemessage slot --- packages/main/src/DatePicker.hbs | 5 +++++ packages/main/src/DatePicker.js | 21 +++++++++++++++++++++ packages/main/src/Input.js | 4 +++- packages/main/test/pages/DatePicker.html | 7 +++++++ 4 files changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs index 364804683eef..03671900b5ac 100644 --- a/packages/main/src/DatePicker.hbs +++ b/packages/main/src/DatePicker.hbs @@ -18,6 +18,11 @@ data-sap-focus-ref ._inputAccInfo ="{{accInfo}}" > + + {{#if valueStateMessage.length}} + + {{/if}} + {{#unless readonly}} ui5-datepicker. + *

+ * + * Note: If not specified, a default text (in the respective language) will be displayed. + *
+ * Note: The valueStateMessage would be displayed, + * when the ui5-input is in Information, Warning or Error value state. + * @type {HTMLElement} + * @since 1.0.0-rc.7 + * @slot + * @public + */ + valueStateMessage: { + type: HTMLElement, + }, + }, + events: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ { /** diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index a8feb6666960..40ffe5b18aa7 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -838,7 +838,9 @@ class Input extends UI5Element { } get valueStateMessageText() { - const valueStateMessage = this.valueStateMessage.map(x => x.cloneNode(true)); + const valueStateMessage = []; + const slottedContent = this.valueStateMessage[0].tagName === "SLOT" ? this.valueStateMessage[0].assignedNodes()[0] : this.valueStateMessage[0]; + valueStateMessage.push(slottedContent.cloneNode(true)); return valueStateMessage; } diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 24afb84a5ea1..76664f2e1f69 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -41,6 +41,13 @@ title='Delivery Date!'> + +
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
+ +

placeholder + title + events

Date: Tue, 14 Apr 2020 16:52:25 +0300 Subject: [PATCH 02/13] use section tag instead of div --- packages/main/src/Dialog.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs index 02ce1297652b..49b1a221b9c1 100644 --- a/packages/main/src/Dialog.hbs +++ b/packages/main/src/Dialog.hbs @@ -3,7 +3,7 @@
- +
From 1080d68df4f548f6cb56fc4cb661949cf3ede3d4 Mon Sep 17 00:00:00 2001 From: ilhan Date: Tue, 14 Apr 2020 16:56:18 +0300 Subject: [PATCH 03/13] revert my commit --- packages/main/src/Dialog.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs index 49b1a221b9c1..02ce1297652b 100644 --- a/packages/main/src/Dialog.hbs +++ b/packages/main/src/Dialog.hbs @@ -3,7 +3,7 @@
- +
From 5a02a495586fd73a01e5bb30fae88b30c1b529ee Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Wed, 15 Apr 2020 11:50:18 +0300 Subject: [PATCH 04/13] fix comments --- packages/main/src/Input.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index 40ffe5b18aa7..e26b265d6a47 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -296,6 +296,11 @@ const metadata = { type: Boolean, noAttribute: true, }, + + _inputFocused: { + type: Boolean, + noAttribute: true, + }, }, events: /** @lends sap.ui.webcomponents.main.Input.prototype */ { /** @@ -534,6 +539,8 @@ class Input extends UI5Element { _onfocusin(event) { this.focused = true; // invalidating property this.previousValue = this.value; + + this._inputFocused = event.target !== this.getInputDOMRef(); } _onfocusout(event) { @@ -858,7 +865,7 @@ class Input extends UI5Element { } get hasValueStateMessage() { - return this.hasValueState && this.valueState !== ValueState.Success; + return this.hasValueState && this.valueState !== ValueState.Success && !this._inputFocused; } get valueStateText() { From fd92b796d8616485fb337a5ee56a9bfa3aebc598 Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Wed, 15 Apr 2020 14:47:28 +0300 Subject: [PATCH 05/13] fix comments --- packages/main/src/DatePicker.js | 2 +- packages/main/src/Input.js | 26 +++++++++++-------- .../main/test/samples/DatePicker.sample.html | 10 ++++--- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index aac2a99a4f59..3de1d1841dd3 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -209,7 +209,7 @@ const metadata = { * Note: If not specified, a default text (in the respective language) will be displayed. *
* Note: The valueStateMessage would be displayed, - * when the ui5-input is in Information, Warning or Error value state. + * when the ui5-datepicker is in Information, Warning or Error value state. * @type {HTMLElement} * @since 1.0.0-rc.7 * @slot diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index e26b265d6a47..4e7a79109006 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -475,7 +475,7 @@ class Input extends UI5Element { if (!isPhone() && shouldOpenSuggestions) { // Set initial focus to the native input - this.getInputDOMRef().focus(); + this.inputDomRef.focus(); } } @@ -536,11 +536,12 @@ class Input extends UI5Element { } } - _onfocusin(event) { + async _onfocusin(event) { this.focused = true; // invalidating property this.previousValue = this.value; - this._inputFocused = event.target !== this.getInputDOMRef(); + await this.getInputDOMRef(); + this._inputFocused = event.target !== this.inputDomRef; } _onfocusout(event) { @@ -571,7 +572,7 @@ class Input extends UI5Element { } _handleInput(event) { - if (event.target === this.getInputDOMRef()) { + if (event.target === this.inputDomRef) { // stop the native event, as the semantic "input" would be fired. event.stopImmediatePropagation(); } @@ -580,7 +581,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.inputDomRef.value === this.value) && isIE() && !this._keyDown && !!this.placeholder; !skipFiring && this.fireEventByAction(this.ACTION_USER_INPUT); @@ -601,10 +602,11 @@ class Input extends UI5Element { this.Suggestions.close(); } - _afterOpenPopover() { + async _afterOpenPopover() { // Set initial focus to the native input if (isPhone()) { - this.getInputDOMRef().focus(); + await this.inputDomRef; + this.inputDomRef.focus(); } } @@ -727,15 +729,16 @@ class Input extends UI5Element { getInputValue() { const inputDOM = this.getDomRef(); if (inputDOM) { - return this.getInputDOMRef().value; + return this.inputDomRef.value; } return ""; } - getInputDOMRef() { + async getInputDOMRef() { let inputDomRef; - if (isPhone()) { + if (isPhone() && this.Suggestions) { + await this.Suggestions._respPopover(); inputDomRef = this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone"); } @@ -743,7 +746,8 @@ class Input extends UI5Element { inputDomRef = this.getDomRef().querySelector(`#${this.getInputId()}`); } - return inputDomRef; + this.inputDomRef = inputDomRef; + return this.inputDomRef; } getLabelableElementId() { diff --git a/packages/main/test/samples/DatePicker.sample.html b/packages/main/test/samples/DatePicker.sample.html index 88db56891f4f..067d155dc193 100644 --- a/packages/main/test/samples/DatePicker.sample.html +++ b/packages/main/test/samples/DatePicker.sample.html @@ -19,14 +19,18 @@

Basic DatePicker

-

DatePicker with Placeholder, Tooltip, Events, and ValueState

+

DatePicker with Placeholder, Tooltip, Events, ValueState and valueStateMessage

- + +
The value is not valid. Please provide valid value
+ 

-<ui5-datepicker id="myDatepicker2" placeholder='Delivery Date...' title='Delivery Date!'></ui5-datepicker>
+<ui5-datepicker id='myDatepicker2' placeholder='Delivery Date...' title='Delivery Date!'>
+	<div slot="valueStateMessage">The value is not valid. Please provide valid value</div>
+</ui5-datepicker>
 <script>
 	const dp = document.getElementById('myDatepicker2');
 	dp.addEventListener('change', (e) => {

From def7eb278cbf5172439c35450e9b56489a68f8bb Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 23 Apr 2020 14:35:26 +0300
Subject: [PATCH 06/13] fix comments

---
 packages/main/src/Input.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 4e7a79109006..8acfded0f177 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -541,7 +541,7 @@ class Input extends UI5Element {
 		this.previousValue = this.value;
 
 		await this.getInputDOMRef();
-		this._inputFocused = event.target !== this.inputDomRef;
+		this._inputFocused = event.target === this.inputDomRef;
 	}
 
 	_onfocusout(event) {
@@ -593,9 +593,7 @@ class Input extends UI5Element {
 	}
 
 	_handleResize() {
-		if (this.hasValueStateMessage) {
-			this._inputWidth = this.offsetWidth;
-		}
+		this._inputWidth = this.offsetWidth;
 	}
 
 	_closeRespPopover() {
@@ -869,7 +867,9 @@ class Input extends UI5Element {
 	}
 
 	get hasValueStateMessage() {
-		return this.hasValueState && this.valueState !== ValueState.Success && !this._inputFocused;
+		return this.hasValueState && this.valueState !== ValueState.Success
+			&& (this._inputFocused // Handles the cases when valueStateMessage is forwarded (from datepicker e.g.)
+			|| (this._isPhone && this.Suggestions)); // Handles Input with suggestions on mobile
 	}
 
 	get valueStateText() {

From 5f8aaeba6215614a42596e9fba1f731047b9c0fb Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Mon, 27 Apr 2020 11:21:16 +0300
Subject: [PATCH 07/13] await async method

---
 packages/main/src/Input.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 8acfded0f177..6614214a586e 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -297,7 +297,7 @@ const metadata = {
 			noAttribute: true,
 		},
 
-		_inputFocused: {
+		_inputIconFocused: {
 			type: Boolean,
 			noAttribute: true,
 		},
@@ -541,7 +541,7 @@ class Input extends UI5Element {
 		this.previousValue = this.value;
 
 		await this.getInputDOMRef();
-		this._inputFocused = event.target === this.inputDomRef;
+		this._inputIconFocused = event.target === this.querySelector("ui5-icon");
 	}
 
 	_onfocusout(event) {
@@ -571,7 +571,8 @@ class Input extends UI5Element {
 		this.fireEvent(this.EVENT_CHANGE);
 	}
 
-	_handleInput(event) {
+	async _handleInput(event) {
+		await this.getInputDOMRef();
 		if (event.target === this.inputDomRef) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
@@ -695,7 +696,9 @@ class Input extends UI5Element {
 		this.value = item.group ? "" : item.textContent;
 	}
 
-	fireEventByAction(action) {
+	async fireEventByAction(action) {
+		await this.getInputDOMRef();
+
 		if (this.disabled || this.readonly) {
 			return;
 		}
@@ -868,7 +871,7 @@ class Input extends UI5Element {
 
 	get hasValueStateMessage() {
 		return this.hasValueState && this.valueState !== ValueState.Success
-			&& (this._inputFocused // Handles the cases when valueStateMessage is forwarded (from datepicker e.g.)
+			&& (!this._inputIconFocused // Handles the cases when valueStateMessage is forwarded (from datepicker e.g.)
 			|| (this._isPhone && this.Suggestions)); // Handles Input with suggestions on mobile
 	}
 

From 56f9a80d2c39c6f837107cedb3944a29e054579f Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Mon, 4 May 2020 10:30:11 +0300
Subject: [PATCH 08/13] fix comment

---
 packages/main/src/Input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 6614214a586e..65b9e87bf57c 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -604,7 +604,7 @@ class Input extends UI5Element {
 	async _afterOpenPopover() {
 		// Set initial focus to the native input
 		if (isPhone()) {
-			await this.inputDomRef;
+			await this.getInputDOMRef();
 			this.inputDomRef.focus();
 		}
 	}

From 71d4a8302dfe52376fe4996957dbc393dc3e0743 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Mon, 4 May 2020 13:04:18 +0300
Subject: [PATCH 09/13] add test

---
 .../main/test/pageobjects/DatePickerTestPage.js |  4 ++++
 .../main/test/pages/DatePicker_test_page.html   |  9 +++++++++
 packages/main/test/specs/DatePicker.spec.js     | 17 ++++++++++++++---
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/main/test/pageobjects/DatePickerTestPage.js b/packages/main/test/pageobjects/DatePickerTestPage.js
index 742bb883545e..181dc47ada66 100644
--- a/packages/main/test/pageobjects/DatePickerTestPage.js
+++ b/packages/main/test/pageobjects/DatePickerTestPage.js
@@ -39,6 +39,10 @@ class DatePickerTestPage {
 		return browser.$(this._sut).shadow$("ui5-input").shadow$("input");
 	}
 
+	get inputStaticAreaItem() {
+		return browser.$(`.${this.input.getProperty("_id")}`);
+	}
+
 	hasIcon() {
 		return browser.execute(function(id) {
 			return !!document.querySelector(id).shadowRoot.querySelector("ui5-icon");
diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html
index 4db8f94d506a..028cb12d7452 100644
--- a/packages/main/test/pages/DatePicker_test_page.html
+++ b/packages/main/test/pages/DatePicker_test_page.html
@@ -56,6 +56,15 @@ <h3>Test placeholder</h3>
 	<ui5-datepicker id="dp14" format-pattern="MMM d, y"></ui5-datepicker>
 	<ui5-datepicker id="dp15" format-pattern="MMM d, y" placeholder="Delivery date"></ui5-datepicker>
 
+	<h3>DatePicker with valueStateMessage</h3>
+		<ui5-datepicker
+		id="dp17"
+		value-state="Error">
+			<div slot="valueStateMessage" id="coolValueStateMessage">
+				This date is wrong
+			</div>
+		</ui5-datepicker>
+
 	<script>
 		var originalGetDate = Date.prototype.getDate;
 
diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
index 2c01d532afba..e06a5882dc7e 100644
--- a/packages/main/test/specs/DatePicker.spec.js
+++ b/packages/main/test/specs/DatePicker.spec.js
@@ -39,6 +39,17 @@ describe("Date Picker Tests", () => {
 		assert.ok(contentWrapper.isDisplayedInViewport(), "content wrapper has error styles");
 	});
 
+	it("Value State Message", () => {
+		datepicker.id = "#dp17"
+		datepicker.root.click();
+
+		const inputStaticAreaItem = datepicker.inputStaticAreaItem;
+		const popover = inputStaticAreaItem.shadow$("ui5-popover");
+
+		const slot = popover.$("#coolValueStateMessage");
+		assert.notOk(slot.error, "Value State message slot is working");
+	});
+
 	it("disabled", () => {
 		datepicker.id = "#dp2";
 		datepicker.root.setAttribute("disabled", "");
@@ -551,7 +562,7 @@ describe("Date Picker Tests", () => {
 		while(datepicker.root.getValue() !== ""){
 			datepicker.root.keys("Backspace");
 		}
- 
+
 		datepicker.root.keys("May 5, 2100");
 		datepicker.root.keys("Enter");
 
@@ -568,7 +579,7 @@ describe("Date Picker Tests", () => {
 		while(datepicker.root.getValue() !== ""){
 			datepicker.root.keys("Backspace");
 		}
- 
+
 		datepicker.root.keys("Jan 8, 2100");
 		datepicker.root.keys("Enter");
 
@@ -578,7 +589,7 @@ describe("Date Picker Tests", () => {
 		while(datepicker.root.getValue() !== ""){
 			datepicker.root.keys("Backspace");
 		}
- 
+
 		datepicker.root.keys("Jan 1, 2000");
 		datepicker.root.keys("Enter");
 

From 47b6ad3806440d2d88bc59389f36d064a40bc3f8 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Mon, 4 May 2020 13:58:52 +0300
Subject: [PATCH 10/13] make links work

---
 packages/main/src/Input.js               | 3 ++-
 packages/main/test/pages/DatePicker.html | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index a021cb88ce6f..a1df92ff9c97 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -551,7 +551,8 @@ class Input extends UI5Element {
 	_onfocusout(event) {
 		// if focusout is triggered by pressing on suggestion item skip invalidation, because re-rendering
 		// will happen before "itemPress" event, which will make item "active" state not visualized
-		if (this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover)) {
+		if ((this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover))
+		|| (event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root"))) {
 			return;
 		}
 
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
index 76664f2e1f69..772c69dd9130 100644
--- a/packages/main/test/pages/DatePicker.html
+++ b/packages/main/test/pages/DatePicker.html
@@ -41,7 +41,7 @@
 			title='Delivery Date!'>
 		</ui5-datepicker>
 
-		<ui5-datepicker id='ui5-datepicker--startDate'
+		<ui5-datepicker id='ui5-datepicker-value-state-message'
 		placeholder='Delivery Date...'
 		value-state="Error"
 		title='Delivery Date!'>

From cff4e5ac473099eb88b5b5bd02a0041b7e9f95b9 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Mon, 4 May 2020 14:57:19 +0300
Subject: [PATCH 11/13] fix failing tests

---
 packages/main/test/specs/DatePicker.spec.js | 16 +++++++++-------
 packages/tools/components-package/wdio.js   |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
index e06a5882dc7e..6657c447202a 100644
--- a/packages/main/test/specs/DatePicker.spec.js
+++ b/packages/main/test/specs/DatePicker.spec.js
@@ -39,6 +39,15 @@ describe("Date Picker Tests", () => {
 		assert.ok(contentWrapper.isDisplayedInViewport(), "content wrapper has error styles");
 	});
 
+	it("Can focus the input after open", () => {
+		datepicker.id = "#dp1";
+		datepicker.openPicker({ focusInput: true });
+		const a = datepicker.innerInput.isFocusedDeep();
+
+		console.log(datepicker.innerInput.isFocusedDeep());
+		assert.ok(a, "inner input is focused");
+	});
+
 	it("Value State Message", () => {
 		datepicker.id = "#dp17"
 		datepicker.root.click();
@@ -92,13 +101,6 @@ describe("Date Picker Tests", () => {
 		assert.equal(datepicker.innerInput.getAttribute("value"), "Rab. I 6, 1440 AH", "input has correct Islamic value");
 	});
 
-	it("Can focus the input after open", () => {
-		datepicker.id = "#dp1";
-		datepicker.openPicker({ focusInput: true });
-
-		assert.ok(datepicker.innerInput.isFocusedDeep(), "inner input is focused");
-	});
-
 	it("Selected date from daypicker is the same as datepicker date", () => {
 		datepicker.id = "#dp4";
 
diff --git a/packages/tools/components-package/wdio.js b/packages/tools/components-package/wdio.js
index c6ae4bc58da4..982175060a5b 100644
--- a/packages/tools/components-package/wdio.js
+++ b/packages/tools/components-package/wdio.js
@@ -57,7 +57,7 @@ exports.config = {
 			// to run chrome headless the following flags are required
 			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
 			args: ['--headless', '--disable-gpu'],
-			//args: ['--disable-gpu'],
+			// args: ['--disable-gpu'],
 		}
 	}],
 	//

From 385ba8d486602ddc50aa8278386f38efd95381a4 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Tue, 5 May 2020 11:45:28 +0300
Subject: [PATCH 12/13] extract vars from complex expression and update the
 comment on top

---
 packages/main/src/Input.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index a1df92ff9c97..c607f72d95ba 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -549,10 +549,12 @@ class Input extends UI5Element {
 	}
 
 	_onfocusout(event) {
-		// if focusout is triggered by pressing on suggestion item skip invalidation, because re-rendering
+		const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
+		const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
+
+		// if focusout is triggered by pressing on suggestion item or value state message popover, skip invalidation, because re-rendering
 		// will happen before "itemPress" event, which will make item "active" state not visualized
-		if ((this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover))
-		|| (event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root"))) {
+		if (focusedOutToSuggestions	|| focusedOutToValueStateMessage) {
 			return;
 		}
 

From 9941bb5c31da36536ffef35b21a673e826139290 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Tue, 5 May 2020 11:59:10 +0300
Subject: [PATCH 13/13] make it work with several items in the slot

---
 packages/main/src/Input.js               | 12 ++++++++++--
 packages/main/src/InputPopover.hbs       | 10 +++++-----
 packages/main/test/pages/DatePicker.html |  1 +
 packages/main/test/pages/Input.html      |  1 +
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index c607f72d95ba..bfa36412a991 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -858,8 +858,16 @@ class Input extends UI5Element {
 
 	get valueStateMessageText() {
 		const valueStateMessage = [];
-		const slottedContent = this.valueStateMessage[0].tagName === "SLOT" ? this.valueStateMessage[0].assignedNodes()[0] : this.valueStateMessage[0];
-		valueStateMessage.push(slottedContent.cloneNode(true));
+
+		this.valueStateMessage.forEach(el => {
+			if (el.localName === "slot") {
+				el.assignedNodes({ flatten: true }).forEach(assignedNode => {
+					valueStateMessage.push(assignedNode.cloneNode(true));
+				});
+			} else {
+				valueStateMessage.push(el.cloneNode(true));
+			}
+		});
 
 		return valueStateMessage;
 	}
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
index 58a86afa33bc..9648dca7016e 100644
--- a/packages/main/src/InputPopover.hbs
+++ b/packages/main/src/InputPopover.hbs
@@ -34,7 +34,7 @@
 			{{#if hasValueStateMessage}}
 				<div class="row {{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
 					{{> valueStateMessage}}
-				</div>		
+				</div>
 			{{/if}}
 		</div>
 	{{/if}}
@@ -43,7 +43,7 @@
 		{{#if hasValueStateMessage}}
 			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
 				{{> valueStateMessage}}
-			</div>		
+			</div>
 		{{/if}}
 	{{/unless}}
 
@@ -51,7 +51,7 @@
 		<ui5-list separators="Inner">
 			{{#each suggestionsTexts}}
 				{{#if group}}
-					<ui5-li-groupheader>{{ this.text }}</ui5-groupheader>
+					<ui5-li-groupheader>{{ this.text }}</ui5-li-groupheader>
 				{{else}}
 					<ui5-li
 						image="{{this.image}}"
@@ -59,7 +59,7 @@
 						description="{{this.description}}"
 						info="{{this.info}}"
 						info-state="{{this.infoState}}"
-						@ui5-_itemPress="{{ fnOnSuggestionItemPress }}" 
+						@ui5-_itemPress="{{ fnOnSuggestionItemPress }}"
 					>{{ this.text }}</ui5-li>
 				{{/if}}
 			{{/each}}
@@ -96,4 +96,4 @@
 			{{this}}
 		{{/each}}
 	{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
index 772c69dd9130..259a9e277214 100644
--- a/packages/main/test/pages/DatePicker.html
+++ b/packages/main/test/pages/DatePicker.html
@@ -46,6 +46,7 @@
 		value-state="Error"
 		title='Delivery Date!'>
 			<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
+			<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
 		</ui5-datepicker>
 
 		<h3>placeholder + title + events</h3>
diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
index e4f7814d5110..a872909ea4c6 100644
--- a/packages/main/test/pages/Input.html
+++ b/packages/main/test/pages/Input.html
@@ -103,6 +103,7 @@ <h3>Input with valueState and Dynamic suggestions</h3>
 		value-state="Error"
 		placeholder="Search for a country ...">
 	<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
+	<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
 	</ui5-input>
 
 	<h3>Input suggestions with valueState and ui5-li</h3>