From a583902f30bbfefe29f9cb22970a895eec20d8be Mon Sep 17 00:00:00 2001
From: scrp <scraplbuild@gmail.com>
Date: Wed, 12 Jun 2019 03:47:37 +0900
Subject: [PATCH] fix(textarea): inherit white-space for better customization
 (#18508)

fixes #18495
---
 .../textarea/test/standalone/index.html       | 30 +++++++++++++++++++
 core/src/components/textarea/textarea.scss    |  6 ++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/core/src/components/textarea/test/standalone/index.html b/core/src/components/textarea/test/standalone/index.html
index 751d94bf14..8923dce008 100644
--- a/core/src/components/textarea/test/standalone/index.html
+++ b/core/src/components/textarea/test/standalone/index.html
@@ -16,6 +16,7 @@
   <ion-textarea value="value"></ion-textarea>
   <ion-textarea value="44"></ion-textarea>
   <ion-textarea placeholder="Custom" class="custom"></ion-textarea>
+  <ion-textarea id="nowrap" rows="15"></ion-textarea>
   <ion-textarea placeholder="Auto Grow!" auto-grow="true"></ion-textarea>
 
   <style>
@@ -23,6 +24,35 @@
       --background: papayawhip;
       --color: blue;
     }
+
+    #nowrap {
+      font-size: 8px;
+      font-family: monospace;
+      font-weight: bold;
+
+      white-space: nowrap;
+    }
   </style>
+
+  <script>
+    var textarea = document.querySelector('#nowrap');
+
+    textarea.value =
+`@@@@@@@////////////////@@@(/#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+@@@@/////@@@@@@@@@@@@@@@///////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+@@@////@@@@@@@@@@@@@@@@@///////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+@(///@@@@@@@@@@@@@@@@@@@@/////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+@///@@@@@@@(/////////&@@@@@@@@//@@@@@@@@@@///#@@@@//////////@@@@/////////////@@@////@@@@//////////@
+///@@@@@@@/////////////@@@@@@@///@@@@@@@@@///#@@////@@@@@////(@@/////@@@@@////@@////@@(////@@@@,///
+///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@@///@@@@@@@@@@
+///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@#///@@@@@@@@@@
+///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@@///@@@@@@@@@@
+///@@@@@@@/////////////@@@@@@(///@@@@@@@@@///#@@/////@@@@////@@@////@@@@@@@///@@////@@@////@@@@////
+@///@@@@@@@@/////////@@@@@@@@///@@@@@@@@@@///#@@@@//////////@@@@////@@@@@@@///@@////@@@@//////////@
+@@///@@@@@@@@@@@@@@@@@@@@@@#///@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+@@@////@@@@@@@@@@@@@@@@@@@////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+@@@@@/////@@@@@@@@@@@@@/////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+@@@@@@@///////////////////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@`;
+  </script>
 </body>
 </html>
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index 7f7cffa130..718b69474f 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -42,6 +42,8 @@
 
   font-family: $font-family-base;
 
+  white-space: pre-wrap;
+
   z-index: $z-index-item-input;
 }
 
@@ -89,8 +91,6 @@
   resize: none;
   appearance: none;
 
-  white-space: pre-wrap;
-
   &::placeholder {
     color: var(--placeholder-color);
 
@@ -120,4 +120,4 @@
   position: absolute;
 
   pointer-events: none;
-}
\ No newline at end of file
+}