From 494991e9fbb61b346390d1e40d756e22fb7c7741 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 12 Apr 2019 13:23:04 -0400
Subject: [PATCH] fix(textarea): float label when a value is changed async
 (#18024)

emits styles to the parent item on value change so that the item will get the proper class to float the label

fixes #17555 fixes #17559
---
 .../src/components/textarea/test/basic/e2e.ts | 12 +++++--
 .../components/textarea/test/basic/index.html | 31 ++++++++-----------
 core/src/components/textarea/textarea.tsx     |  1 +
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/core/src/components/textarea/test/basic/e2e.ts b/core/src/components/textarea/test/basic/e2e.ts
index e2b86aced1..736ae9ccab 100644
--- a/core/src/components/textarea/test/basic/e2e.ts
+++ b/core/src/components/textarea/test/basic/e2e.ts
@@ -5,6 +5,14 @@ test('textarea: basic', async () => {
     url: '/src/components/textarea/test/basic?ionic:_testing=true'
   });
 
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  const compares = [];
+
+  compares.push(await page.compareScreenshot());
+
+  page.waitFor(2000);
+  compares.push(await page.compareScreenshot('value changed'));
+
+  for (const compare of compares) {
+    expect(compare).toMatchScreenshot();
+  }
 });
diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html
index 3ab24fd5f8..3e69d417cf 100644
--- a/core/src/components/textarea/test/basic/index.html
+++ b/core/src/components/textarea/test/basic/index.html
@@ -29,7 +29,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label color="primary" fixed>Fixed Label</ion-label>
+          <ion-label color="primary" position="fixed">Fixed Label</ion-label>
           <ion-textarea placeholder="Textarea"></ion-textarea>
         </ion-item>
 
@@ -38,13 +38,13 @@
         </ion-item>
 
         <ion-item>
-          <ion-label color="primary" stacked>Stacked Label</ion-label>
+          <ion-label color="primary" position="stacked">Stacked Label</ion-label>
           <ion-textarea placeholder="Textarea"></ion-textarea>
         </ion-item>
 
         <ion-item>
-          <ion-label color="primary" floating>Floating Label</ion-label>
-          <ion-textarea></ion-textarea>
+          <ion-label color="primary" position="floating">Floating Label</ion-label>
+          <ion-textarea id="timeout"></ion-textarea>
         </ion-item>
 
         <ion-item>
@@ -58,24 +58,14 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>Dynamic Value</ion-label>
-          <ion-input id="dynamicValue" value="dynamic"></ion-input>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Dynamic Value</ion-label>
-          <ion-textarea id="dynamicTextareaValue" value="dynamic"></ion-textarea>
+          <ion-label position="floating">Dynamic Value</ion-label>
+          <ion-textarea id="dynamicValue" value="dynamic"></ion-textarea>
         </ion-item>
 
         <ion-item>
           <ion-label color="primary">Clear on Edit</ion-label>
           <ion-textarea clear-on-edit="true"></ion-textarea>
         </ion-item>
-
-        <ion-item>
-          <ion-label color="primary">Clear on Edit</ion-label>
-          <ion-input clear-on-edit="true"></ion-input>
-        </ion-item>
       </ion-list>
 
       <div text-center>
@@ -87,17 +77,22 @@
           Toggle Readonly
         </ion-button>
 
-        <ion-button color="light" onclick="toggleString('dynamicValue', 'value'); toggleString('dynamicTextareaValue', 'value')">
+        <ion-button color="light" onclick="toggleString('dynamicValue', 'value');">
           Toggle Value
         </ion-button>
 
-        <ion-button color="danger" onclick="clearString('dynamicValue', 'value'); clearString('dynamicTextareaValue', 'value')">
+        <ion-button color="danger" onclick="clearString('dynamicValue', 'value');">
           Clear Value
         </ion-button>
       </div>
     </ion-content>
 
     <script>
+      var textarea = document.getElementById('timeout');
+      setTimeout(() => {
+        textarea.value = 'timeout';
+      }, 1000);
+
       function toggleBoolean(id, prop) {
         var el = document.getElementById(id);
 
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 2223773189..97bcf96812 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -134,6 +134,7 @@ export class Textarea implements ComponentInterface {
     if (nativeInput && nativeInput.value !== value) {
       nativeInput.value = value;
     }
+    this.emitStyle();
     this.ionChange.emit({ value });
   }