From 256477c1143dc0407b9057168bbc91b15988d70e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lud=C4=9Bk=20Vep=C5=99ek?= <weprous@gmail.com>
Date: Wed, 10 Oct 2018 15:31:03 +0200
Subject: [PATCH] FIX: IE - Textarea box-shadow and scrollbar

---
 .../__snapshots__/Textarea.stories.storyshot         | 12 ++++++------
 src/Textarea/index.js                                |  7 ++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/Textarea/__snapshots__/Textarea.stories.storyshot b/src/Textarea/__snapshots__/Textarea.stories.storyshot
index 0a4e038637..4bfc38ed4d 100644
--- a/src/Textarea/__snapshots__/Textarea.stories.storyshot
+++ b/src/Textarea/__snapshots__/Textarea.stories.storyshot
@@ -103,7 +103,7 @@ exports[`Storyshots Textarea Default 1`] = `
             data-test={undefined}
           >
             <textarea
-              className="Textarea__StyledTextArea-iLqCZR kfzwzn"
+              className="Textarea__StyledTextArea-iLqCZR ggVGGf"
               disabled={undefined}
               maxLength={undefined}
               name={undefined}
@@ -386,7 +386,7 @@ exports[`Storyshots Textarea Playground 1`] = `
               </span>
             </span>
             <textarea
-              className="Textarea__StyledTextArea-iLqCZR hcwkQS"
+              className="Textarea__StyledTextArea-iLqCZR doQANg"
               disabled={true}
               maxLength={undefined}
               name={undefined}
@@ -961,7 +961,7 @@ exports[`Storyshots Textarea Small size 1`] = `
             data-test={undefined}
           >
             <textarea
-              className="Textarea__StyledTextArea-iLqCZR jROCSV"
+              className="Textarea__StyledTextArea-iLqCZR cLYVha"
               disabled={undefined}
               maxLength={undefined}
               name={undefined}
@@ -1275,7 +1275,7 @@ exports[`Storyshots Textarea With error 1`] = `
             data-test={undefined}
           >
             <textarea
-              className="Textarea__StyledTextArea-iLqCZR aHzeJ"
+              className="Textarea__StyledTextArea-iLqCZR hywnZl"
               disabled={undefined}
               maxLength={undefined}
               name={undefined}
@@ -1595,7 +1595,7 @@ exports[`Storyshots Textarea With help 1`] = `
             data-test={undefined}
           >
             <textarea
-              className="Textarea__StyledTextArea-iLqCZR kfzwzn"
+              className="Textarea__StyledTextArea-iLqCZR ggVGGf"
               disabled={undefined}
               maxLength={undefined}
               name={undefined}
@@ -1923,7 +1923,7 @@ exports[`Storyshots Textarea With label 1`] = `
               </span>
             </span>
             <textarea
-              className="Textarea__StyledTextArea-iLqCZR kfzwzn"
+              className="Textarea__StyledTextArea-iLqCZR ggVGGf"
               disabled={undefined}
               maxLength={undefined}
               name={undefined}
diff --git a/src/Textarea/index.js b/src/Textarea/index.js
index 5914cf0bd9..7bfa96d05c 100644
--- a/src/Textarea/index.js
+++ b/src/Textarea/index.js
@@ -43,7 +43,6 @@ const StyledTextArea = styled(({ theme, size, error, help, ...props }) => <texta
   width: 100%;
   padding: ${getTokens(TOKENS.paddingInput)};
   border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
-  border: 0;
   box-shadow: inset 0 0 0
     ${({ theme, error }) =>
       `${theme.orbit.borderWidthInput} ${
@@ -60,6 +59,12 @@ const StyledTextArea = styled(({ theme, size, error, help, ...props }) => <texta
   resize: ${({ resize }) => resize};
   transition: box-shadow ${({ theme }) => theme.orbit.durationFast} ease-in-out;
 
+  // IE 11 bug fix, border: 0 won't work - the box-shadow will be hidden
+  border: 1px solid transparent;
+
+  // IE 11 bug fix, hide scrollbar by default (shown only when scrollable)
+  overflow: auto;
+
   &::placeholder {
     color: ${({ theme }) => theme.orbit.colorPlaceholderInput};
   }