Merge pull request #473 from kiwicom/fix/ie-textarea-boxshadow-scrollbar

FIX: IE - Textarea box-shadow and scrollbar
kiwicom · Oct 11, 2018 · bd022a3 · bd022a3
2 parents d9b07aa + 256477c
commit bd022a3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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};
   }