From cc806f4a242ebc66de945d4ca59f2c93da75d932 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Thu, 30 Apr 2020 12:58:27 +0300
Subject: [PATCH] fix(ui5-textarea): stop showing valueStateMsg in
 value-state="None"

---
 packages/main/src/TextArea.js             | 18 +++++++++---------
 packages/main/src/TextAreaPopover.hbs     |  8 ++++----
 packages/main/test/pages/TextArea.html    |  6 +++++-
 packages/main/test/specs/TextArea.spec.js | 12 ++++++++++++
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
index 950265f5fa07..3ddee06f2d2d 100644
--- a/packages/main/src/TextArea.js
+++ b/packages/main/src/TextArea.js
@@ -427,7 +427,7 @@ class TextArea extends UI5Element {
 	}
 
 	_onResize() {
-		if (this.displayValueStateMessage) {
+		if (this.displayValueStateMessagePopover) {
 			this._width = this.offsetWidth;
 		}
 	}
@@ -546,19 +546,19 @@ class TextArea extends UI5Element {
 	}
 
 	get openValueStateMsgPopover() {
-		return !this._firstRendering && this._openValueStateMsgPopover && this.displayValueStateMessage;
+		return !this._firstRendering && this._openValueStateMsgPopover && this.displayValueStateMessagePopover;
 	}
 
-	get displayValueStateMessage() {
-		return !!this.valueStateMessage.length || this.exceeding || (this.valueState !== ValueState.Success && this.valueState !== ValueState.None);
+	get displayValueStateMessagePopover() {
+		return this.hasCustomValueState || this.hasValueState || this.exceeding;
 	}
 
-	get displayDefaultValueStateMessage() {
-		if (this.valueStateMessage.length) {
-			return false;
-		}
+	get hasCustomValueState() {
+		return !!this.valueStateMessage.length && this.hasValueState;
+	}
 
-		return this.exceeding || (this.valueState !== ValueState.Success && this.valueState !== ValueState.None);
+	get hasValueState() {
+		return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Information;
 	}
 
 	get valueStateMessageText() {
diff --git a/packages/main/src/TextAreaPopover.hbs b/packages/main/src/TextAreaPopover.hbs
index eb015695d1cd..086b0cdc8610 100644
--- a/packages/main/src/TextAreaPopover.hbs
+++ b/packages/main/src/TextAreaPopover.hbs
@@ -1,4 +1,4 @@
-{{#if displayValueStateMessage}}
+{{#if displayValueStateMessagePopover}}
 	<ui5-popover
 		skip-registry-update
 		no-padding
@@ -16,11 +16,11 @@
 {{/if}}
 
 {{#*inline "valueStateMessage"}}
-	{{#if displayDefaultValueStateMessage}}
-		{{valueStateText}}
-	{{else}}
+	{{#if hasCustomValueState}}
 		{{#each valueStateMessageText}}
 			{{this}}
 		{{/each}}
+	{{else}}
+		{{valueStateText}}
 	{{/if}}
 {{/inline}}
\ No newline at end of file
diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
index 7d9f0b1487e4..8f4ade859086 100644
--- a/packages/main/test/pages/TextArea.html
+++ b/packages/main/test/pages/TextArea.html
@@ -80,7 +80,11 @@
 
 	<section class="group">
 		<ui5-title>Simple TextArea</ui5-title>
-		<ui5-textarea id="basic-textarea" placeholder="Basic text area"></ui5-textarea>
+		<ui5-textarea id="basic-textarea" placeholder="Basic text area">
+			<div slot="valueStateMessage">
+				This msg will not be displayed as no value-state is set.
+			</div>
+		</ui5-textarea>
 
 		<br>
 		<br>
diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js
index 47fcb5027fe6..dd590350542a 100644
--- a/packages/main/test/specs/TextArea.spec.js
+++ b/packages/main/test/specs/TextArea.spec.js
@@ -73,6 +73,18 @@ describe("when enabled", () => {
 		assert.ok(popover.isDisplayedInViewport(), "The value state message popover is displayed");
 	});
 
+	it("does not show value state msg when valueState='None'", () => {
+		const textarea = browser.$("#basic-textarea");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#basic-textarea");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover")
+
+		// act
+		textarea.click();
+
+		// assert
+		assert.ok(!popover.isDisplayedInViewport(), "The value state message popover is not displayed");
+	});
+
 	it("can type inside", () => {
 		const textarea = browser.$("#basic-textarea");
 		const textareaInner = browser.$("#basic-textarea").shadow$("textarea");