From 2ad8c267b25bc766725f1b462abc30253074a609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lud=C4=9Bk=20Vep=C5=99ek?= <weprous@gmail.com>
Date: Wed, 12 Sep 2018 11:38:42 +0200
Subject: [PATCH] FIX: InputField z-index

---
 .../InputField.stories.storyshot              | 84 +++++++++----------
 src/InputField/index.js                       |  6 +-
 .../InputGroup.stories.storyshot              | 58 ++++++-------
 src/InputGroup/index.js                       |  7 +-
 .../__snapshots__/Select.stories.storyshot    | 32 +++----
 src/Select/index.js                           |  2 +
 6 files changed, 99 insertions(+), 90 deletions(-)

diff --git a/src/InputField/__snapshots__/InputField.stories.storyshot b/src/InputField/__snapshots__/InputField.stories.storyshot
index 40a194dc1a..c03b6cf278 100644
--- a/src/InputField/__snapshots__/InputField.stories.storyshot
+++ b/src/InputField/__snapshots__/InputField.stories.storyshot
@@ -99,7 +99,7 @@ exports[`Storyshots InputField Compact input 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <div
               className="InputField__InputContainer-evnRDD bHPfak"
@@ -115,7 +115,7 @@ exports[`Storyshots InputField Compact input 1`] = `
                 </span>
               </div>
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -130,7 +130,7 @@ exports[`Storyshots InputField Compact input 1`] = `
                 value=""
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -505,7 +505,7 @@ exports[`Storyshots InputField Default input 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -516,7 +516,7 @@ exports[`Storyshots InputField Default input 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -531,7 +531,7 @@ exports[`Storyshots InputField Default input 1`] = `
                 value=""
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -833,7 +833,7 @@ exports[`Storyshots InputField Email input 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ irIxpQ"
@@ -844,7 +844,7 @@ exports[`Storyshots InputField Email input 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -859,7 +859,7 @@ exports[`Storyshots InputField Email input 1`] = `
                 value="name@example.co"
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
             <div
@@ -1239,7 +1239,7 @@ exports[`Storyshots InputField Number input 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ irIxpQ"
@@ -1250,7 +1250,7 @@ exports[`Storyshots InputField Number input 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={3}
                 maxLength={undefined}
@@ -1265,7 +1265,7 @@ exports[`Storyshots InputField Number input 1`] = `
                 value={2}
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -1660,7 +1660,7 @@ exports[`Storyshots InputField Password input 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ irIxpQ"
@@ -1671,7 +1671,7 @@ exports[`Storyshots InputField Password input 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -1686,7 +1686,7 @@ exports[`Storyshots InputField Password input 1`] = `
                 value="p422W0rd"
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -2018,7 +2018,7 @@ exports[`Storyshots InputField Playground 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -2029,7 +2029,7 @@ exports[`Storyshots InputField Playground 1`] = `
               className="InputField__InputContainer-evnRDD cirwSX"
             >
               <div
-                className="InputField__Prefix-jLQUQe fVzQfk"
+                className="InputField__Prefix-jLQUQe fhHGYS"
               >
                 <svg
                   className={undefined}
@@ -2051,7 +2051,7 @@ exports[`Storyshots InputField Playground 1`] = `
                 </svg>
               </div>
               <input
-                className="InputField__Input-iRjCvp euqCuo"
+                className="InputField__Input-iRjCvp eQklut"
                 disabled={false}
                 max={undefined}
                 maxLength={undefined}
@@ -2066,7 +2066,7 @@ exports[`Storyshots InputField Playground 1`] = `
                 value=""
               />
               <div
-                className="InputField__Suffix-csEOAt hrFYao"
+                className="InputField__Suffix-csEOAt fekEEr"
               >
                 <button
                   className="ButtonLink__StyledButtonLink-eyUiPe kdbeEm"
@@ -2101,7 +2101,7 @@ exports[`Storyshots InputField Playground 1`] = `
                 </button>
               </div>
               <div
-                className="InputField__FakeInput-eneioc hpAPnX"
+                className="InputField__FakeInput-eneioc VrXqj"
               />
             </div>
           </label>
@@ -2896,7 +2896,7 @@ exports[`Storyshots InputField Required field 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -2912,7 +2912,7 @@ exports[`Storyshots InputField Required field 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -2927,7 +2927,7 @@ exports[`Storyshots InputField Required field 1`] = `
                 value=""
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -3240,7 +3240,7 @@ exports[`Storyshots InputField Small input 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -3251,7 +3251,7 @@ exports[`Storyshots InputField Small input 1`] = `
               className="InputField__InputContainer-evnRDD cirwSX"
             >
               <input
-                className="InputField__Input-iRjCvp euqCuo"
+                className="InputField__Input-iRjCvp eQklut"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -3266,7 +3266,7 @@ exports[`Storyshots InputField Small input 1`] = `
                 value=""
               />
               <div
-                className="InputField__FakeInput-eneioc hpAPnX"
+                className="InputField__FakeInput-eneioc VrXqj"
               />
             </div>
           </label>
@@ -3598,7 +3598,7 @@ exports[`Storyshots InputField With ButtonLink suffix 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -3609,7 +3609,7 @@ exports[`Storyshots InputField With ButtonLink suffix 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -3624,7 +3624,7 @@ exports[`Storyshots InputField With ButtonLink suffix 1`] = `
                 value=""
               />
               <div
-                className="InputField__Suffix-csEOAt iqDXPL"
+                className="InputField__Suffix-csEOAt bGvNJE"
               >
                 <button
                   className="ButtonLink__StyledButtonLink-eyUiPe DORaW"
@@ -3658,7 +3658,7 @@ exports[`Storyshots InputField With ButtonLink suffix 1`] = `
                 </button>
               </div>
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -3991,7 +3991,7 @@ exports[`Storyshots InputField With Icon prefix 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -4002,7 +4002,7 @@ exports[`Storyshots InputField With Icon prefix 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <div
-                className="InputField__Prefix-jLQUQe hkHFBd"
+                className="InputField__Prefix-jLQUQe QdQQH"
               >
                 <svg
                   className={undefined}
@@ -4024,7 +4024,7 @@ exports[`Storyshots InputField With Icon prefix 1`] = `
                 </svg>
               </div>
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -4039,7 +4039,7 @@ exports[`Storyshots InputField With Icon prefix 1`] = `
                 value=""
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -4372,7 +4372,7 @@ exports[`Storyshots InputField With ServiceLogo prefix 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -4383,7 +4383,7 @@ exports[`Storyshots InputField With ServiceLogo prefix 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -4398,7 +4398,7 @@ exports[`Storyshots InputField With ServiceLogo prefix 1`] = `
                 value=""
               />
               <div
-                className="InputField__Suffix-csEOAt iqDXPL"
+                className="InputField__Suffix-csEOAt bGvNJE"
               >
                 <img
                   alt="AirHelp"
@@ -4408,7 +4408,7 @@ exports[`Storyshots InputField With ServiceLogo prefix 1`] = `
                 />
               </div>
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
@@ -4741,7 +4741,7 @@ exports[`Storyshots InputField With text prefix 1`] = `
           }
         >
           <label
-            className="InputField__Field-hAVqzR jrVYdc"
+            className="InputField__Field-hAVqzR cFiTgo"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -4752,12 +4752,12 @@ exports[`Storyshots InputField With text prefix 1`] = `
               className="InputField__InputContainer-evnRDD bHPfak"
             >
               <div
-                className="InputField__Prefix-jLQUQe hkHFBd"
+                className="InputField__Prefix-jLQUQe QdQQH"
               >
                 $
               </div>
               <input
-                className="InputField__Input-iRjCvp kpkyBu"
+                className="InputField__Input-iRjCvp gvOITt"
                 disabled={undefined}
                 max={undefined}
                 maxLength={undefined}
@@ -4772,7 +4772,7 @@ exports[`Storyshots InputField With text prefix 1`] = `
                 value=""
               />
               <div
-                className="InputField__FakeInput-eneioc cqCpJV"
+                className="InputField__FakeInput-eneioc dxPio"
               />
             </div>
           </label>
diff --git a/src/InputField/index.js b/src/InputField/index.js
index d192fd3ead..1ffb0ca22a 100644
--- a/src/InputField/index.js
+++ b/src/InputField/index.js
@@ -14,6 +14,7 @@ const Field = styled.label`
   font-family: ${({ theme }) => theme.orbit.fontFamily};
   position: relative;
   display: block;
+  z-index: 2;
 `;
 
 Field.defaultProps = {
@@ -25,7 +26,7 @@ export const FakeInput = styled(({ children, className }) => (
 ))`
   width: 100%;
   position: absolute;
-  z-index: -1;
+  z-index: 1;
   box-sizing: border-box;
   height: ${({ tokens, size }) => tokens.heightInput[size]};
   border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
@@ -101,6 +102,7 @@ const Prefix = styled(({ children, className }) => <div className={className}>{c
   pointer-events: none;
   justify-content: center;
   padding-left: ${({ theme }) => theme.orbit.spaceSmall};
+  z-index: 2;
 
   & > svg {
     width: ${({ tokens, size }) => tokens.iconSize[size]};
@@ -120,6 +122,7 @@ const Suffix = styled(({ children, className }) => <div className={className}>{c
   align-items: center;
   justify-content: center;
   pointer-events: ${({ disabled }) => disabled && "none"};
+  z-index: 2;
 
   & svg {
     color: ${({ theme }) => theme.orbit.colorIconSecondary};
@@ -150,6 +153,7 @@ export const Input = styled(({ theme, tokens, size, suffix, error, help, ...prop
   height: 100%;
   line-height: ${({ tokens, size }) => tokens.heightInput[size]};
   border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
+  z-index: 2;
 
   &:focus {
     outline: none;
diff --git a/src/InputGroup/__snapshots__/InputGroup.stories.storyshot b/src/InputGroup/__snapshots__/InputGroup.stories.storyshot
index 0b737a19ff..1e9ea24266 100644
--- a/src/InputGroup/__snapshots__/InputGroup.stories.storyshot
+++ b/src/InputGroup/__snapshots__/InputGroup.stories.storyshot
@@ -99,7 +99,7 @@ exports[`Storyshots InputGroup Date of birth 1`] = `
           }
         >
           <div
-            className="InputGroup__StyledInputGroup-boKjnP leBdZJ"
+            className="InputGroup__StyledInputGroup-boKjnP gqqbYV"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -113,13 +113,13 @@ exports[`Storyshots InputGroup Date of birth 1`] = `
                 className="InputGroup__StyledChild-bpaCT eKlxAZ"
               >
                 <label
-                  className="InputField__Field-hAVqzR jrVYdc"
+                  className="InputField__Field-hAVqzR cFiTgo"
                 >
                   <div
                     className="InputField__InputContainer-evnRDD bHPfak"
                   >
                     <input
-                      className="InputField__Input-iRjCvp kpkyBu"
+                      className="InputField__Input-iRjCvp gvOITt"
                       disabled={undefined}
                       max={undefined}
                       maxLength={undefined}
@@ -134,7 +134,7 @@ exports[`Storyshots InputGroup Date of birth 1`] = `
                       value={undefined}
                     />
                     <div
-                      className="InputField__FakeInput-eneioc cqCpJV"
+                      className="InputField__FakeInput-eneioc dxPio"
                     />
                   </div>
                 </label>
@@ -147,7 +147,7 @@ exports[`Storyshots InputGroup Date of birth 1`] = `
                     className="Select__SelectContainer-hisSov erDdbv"
                   >
                     <select
-                      className="Select__StyledSelect-eyhbyk gsufLD"
+                      className="Select__StyledSelect-eyhbyk ffkcBr"
                       disabled={false}
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -236,7 +236,7 @@ exports[`Storyshots InputGroup Date of birth 1`] = `
                       </option>
                     </select>
                     <div
-                      className="Select__SelectSuffix-klejCH ggxKqU"
+                      className="Select__SelectSuffix-klejCH kVNaRO"
                     >
                       <svg
                         className={undefined}
@@ -264,13 +264,13 @@ exports[`Storyshots InputGroup Date of birth 1`] = `
                 className="InputGroup__StyledChild-bpaCT dHAcLQ"
               >
                 <label
-                  className="InputField__Field-hAVqzR jrVYdc"
+                  className="InputField__Field-hAVqzR cFiTgo"
                 >
                   <div
                     className="InputField__InputContainer-evnRDD bHPfak"
                   >
                     <input
-                      className="InputField__Input-iRjCvp kpkyBu"
+                      className="InputField__Input-iRjCvp gvOITt"
                       disabled={undefined}
                       max={undefined}
                       maxLength={undefined}
@@ -285,14 +285,14 @@ exports[`Storyshots InputGroup Date of birth 1`] = `
                       value={undefined}
                     />
                     <div
-                      className="InputField__FakeInput-eneioc cqCpJV"
+                      className="InputField__FakeInput-eneioc dxPio"
                     />
                   </div>
                 </label>
               </div>
             </div>
             <div
-              className="InputGroup__FakeGroup-hRQJuE vkVOW"
+              className="InputGroup__FakeGroup-hRQJuE fOyeYy"
             />
           </div>
         </div>
@@ -1161,7 +1161,7 @@ exports[`Storyshots InputGroup Phone number 1`] = `
           }
         >
           <div
-            className="InputGroup__StyledInputGroup-boKjnP leBdZJ"
+            className="InputGroup__StyledInputGroup-boKjnP gqqbYV"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -1190,7 +1190,7 @@ exports[`Storyshots InputGroup Phone number 1`] = `
                       />
                     </div>
                     <select
-                      className="Select__StyledSelect-eyhbyk gbLmdR"
+                      className="Select__StyledSelect-eyhbyk fRnKOl"
                       disabled={false}
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -1211,7 +1211,7 @@ exports[`Storyshots InputGroup Phone number 1`] = `
                       </option>
                     </select>
                     <div
-                      className="Select__SelectSuffix-klejCH ggxKqU"
+                      className="Select__SelectSuffix-klejCH kVNaRO"
                     >
                       <svg
                         className={undefined}
@@ -1239,13 +1239,13 @@ exports[`Storyshots InputGroup Phone number 1`] = `
                 className="InputGroup__StyledChild-bpaCT jLivMh"
               >
                 <label
-                  className="InputField__Field-hAVqzR jrVYdc"
+                  className="InputField__Field-hAVqzR cFiTgo"
                 >
                   <div
                     className="InputField__InputContainer-evnRDD bHPfak"
                   >
                     <input
-                      className="InputField__Input-iRjCvp kpkyBu"
+                      className="InputField__Input-iRjCvp gvOITt"
                       disabled={undefined}
                       max={undefined}
                       maxLength={11}
@@ -1260,14 +1260,14 @@ exports[`Storyshots InputGroup Phone number 1`] = `
                       value={undefined}
                     />
                     <div
-                      className="InputField__FakeInput-eneioc cqCpJV"
+                      className="InputField__FakeInput-eneioc dxPio"
                     />
                   </div>
                 </label>
               </div>
             </div>
             <div
-              className="InputGroup__FakeGroup-hRQJuE vkVOW"
+              className="InputGroup__FakeGroup-hRQJuE fOyeYy"
             />
           </div>
         </div>
@@ -2062,7 +2062,7 @@ exports[`Storyshots InputGroup Playground 1`] = `
           }
         >
           <div
-            className="InputGroup__StyledInputGroup-boKjnP leBdZJ"
+            className="InputGroup__StyledInputGroup-boKjnP gqqbYV"
           >
             <span
               className="FormLabel-kJFBRQ fuYBgg"
@@ -2080,7 +2080,7 @@ exports[`Storyshots InputGroup Playground 1`] = `
                     className="Select__SelectContainer-hisSov erDdbv"
                   >
                     <select
-                      className="Select__StyledSelect-eyhbyk gsufLD"
+                      className="Select__StyledSelect-eyhbyk ffkcBr"
                       disabled={false}
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -2101,7 +2101,7 @@ exports[`Storyshots InputGroup Playground 1`] = `
                       </option>
                     </select>
                     <div
-                      className="Select__SelectSuffix-klejCH ggxKqU"
+                      className="Select__SelectSuffix-klejCH kVNaRO"
                     >
                       <svg
                         className={undefined}
@@ -2129,13 +2129,13 @@ exports[`Storyshots InputGroup Playground 1`] = `
                 className="InputGroup__StyledChild-bpaCT jLivMh"
               >
                 <label
-                  className="InputField__Field-hAVqzR jrVYdc"
+                  className="InputField__Field-hAVqzR cFiTgo"
                 >
                   <div
                     className="InputField__InputContainer-evnRDD bHPfak"
                   >
                     <input
-                      className="InputField__Input-iRjCvp kpkyBu"
+                      className="InputField__Input-iRjCvp gvOITt"
                       disabled={undefined}
                       max={undefined}
                       maxLength={undefined}
@@ -2150,7 +2150,7 @@ exports[`Storyshots InputGroup Playground 1`] = `
                       value={undefined}
                     />
                     <div
-                      className="InputField__FakeInput-eneioc cqCpJV"
+                      className="InputField__FakeInput-eneioc dxPio"
                     />
                   </div>
                 </label>
@@ -2163,7 +2163,7 @@ exports[`Storyshots InputGroup Playground 1`] = `
                     className="Select__SelectContainer-hisSov erDdbv"
                   >
                     <select
-                      className="Select__StyledSelect-eyhbyk gsufLD"
+                      className="Select__StyledSelect-eyhbyk ffkcBr"
                       disabled={false}
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -2184,7 +2184,7 @@ exports[`Storyshots InputGroup Playground 1`] = `
                       </option>
                     </select>
                     <div
-                      className="Select__SelectSuffix-klejCH ggxKqU"
+                      className="Select__SelectSuffix-klejCH kVNaRO"
                     >
                       <svg
                         className={undefined}
@@ -2212,13 +2212,13 @@ exports[`Storyshots InputGroup Playground 1`] = `
                 className="InputGroup__StyledChild-bpaCT ifkQYU"
               >
                 <label
-                  className="InputField__Field-hAVqzR jrVYdc"
+                  className="InputField__Field-hAVqzR cFiTgo"
                 >
                   <div
                     className="InputField__InputContainer-evnRDD bHPfak"
                   >
                     <input
-                      className="InputField__Input-iRjCvp kpkyBu"
+                      className="InputField__Input-iRjCvp gvOITt"
                       disabled={undefined}
                       max={undefined}
                       maxLength={undefined}
@@ -2233,14 +2233,14 @@ exports[`Storyshots InputGroup Playground 1`] = `
                       value={undefined}
                     />
                     <div
-                      className="InputField__FakeInput-eneioc cqCpJV"
+                      className="InputField__FakeInput-eneioc dxPio"
                     />
                   </div>
                 </label>
               </div>
             </div>
             <div
-              className="InputGroup__FakeGroup-hRQJuE vkVOW"
+              className="InputGroup__FakeGroup-hRQJuE fOyeYy"
             />
           </div>
         </div>
diff --git a/src/InputGroup/index.js b/src/InputGroup/index.js
index f5f175b394..e524643a42 100644
--- a/src/InputGroup/index.js
+++ b/src/InputGroup/index.js
@@ -14,7 +14,7 @@ import type { Props, State } from "./index";
 const FakeGroup = styled(({ children, className }) => <div className={className}>{children}</div>)`
   width: 100%;
   position: absolute;
-  z-index: -1;
+  z-index: 1;
   box-sizing: border-box;
   height: ${({ tokens, size }) => tokens.height[size]};
   border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
@@ -74,7 +74,8 @@ const StyledInputGroup = styled(({ children, className }) => (
 
   ${StyledChild} {
     ${FakeInput} {
-      border: 0;
+      box-shadow: none;
+      background-color: transparent;
       display: flex;
       align-items: center;
       justify-content: flex-end;
@@ -101,6 +102,8 @@ const StyledInputGroup = styled(({ children, className }) => (
         error && !active ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput};
       transition: background-color ${({ theme }) => theme.orbit.durationFast} ease-in-out;
       display: block;
+      z-index: 2;
+      
     }
 
     &:last-child {
diff --git a/src/Select/__snapshots__/Select.stories.storyshot b/src/Select/__snapshots__/Select.stories.storyshot
index 16d0b3fb1d..19df0904c9 100644
--- a/src/Select/__snapshots__/Select.stories.storyshot
+++ b/src/Select/__snapshots__/Select.stories.storyshot
@@ -103,7 +103,7 @@ exports[`Storyshots Select Default 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk gsufLD"
+                className="Select__StyledSelect-eyhbyk ffkcBr"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -130,7 +130,7 @@ exports[`Storyshots Select Default 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH ggxKqU"
+                className="Select__SelectSuffix-klejCH kVNaRO"
               >
                 <svg
                   className={undefined}
@@ -573,7 +573,7 @@ exports[`Storyshots Select Playground 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk gsufLD"
+                className="Select__StyledSelect-eyhbyk ffkcBr"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -608,7 +608,7 @@ exports[`Storyshots Select Playground 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH ggxKqU"
+                className="Select__SelectSuffix-klejCH kVNaRO"
               >
                 <svg
                   className={undefined}
@@ -1226,7 +1226,7 @@ exports[`Storyshots Select With CountryFlag prefix 1`] = `
                 />
               </div>
               <select
-                className="Select__StyledSelect-eyhbyk gbLmdR"
+                className="Select__StyledSelect-eyhbyk fRnKOl"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -1253,7 +1253,7 @@ exports[`Storyshots Select With CountryFlag prefix 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH ggxKqU"
+                className="Select__SelectSuffix-klejCH kVNaRO"
               >
                 <svg
                   className={undefined}
@@ -1768,7 +1768,7 @@ exports[`Storyshots Select With error message 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk iGcvfJ"
+                className="Select__StyledSelect-eyhbyk kMhsIu"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -1795,7 +1795,7 @@ exports[`Storyshots Select With error message 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH ggxKqU"
+                className="Select__SelectSuffix-klejCH kVNaRO"
               >
                 <svg
                   className={undefined}
@@ -2317,7 +2317,7 @@ exports[`Storyshots Select With help message 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk gsufLD"
+                className="Select__StyledSelect-eyhbyk ffkcBr"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -2344,7 +2344,7 @@ exports[`Storyshots Select With help message 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH ggxKqU"
+                className="Select__SelectSuffix-klejCH kVNaRO"
               >
                 <svg
                   className={undefined}
@@ -2869,7 +2869,7 @@ exports[`Storyshots Select With placeholder 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk gsufLD"
+                className="Select__StyledSelect-eyhbyk ffkcBr"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -2904,7 +2904,7 @@ exports[`Storyshots Select With placeholder 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH ggxKqU"
+                className="Select__SelectSuffix-klejCH kVNaRO"
               >
                 <svg
                   className={undefined}
@@ -3440,7 +3440,7 @@ exports[`Storyshots Select With prefix 1`] = `
                 </svg>
               </div>
               <select
-                className="Select__StyledSelect-eyhbyk gbLmdR"
+                className="Select__StyledSelect-eyhbyk fRnKOl"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -3467,7 +3467,7 @@ exports[`Storyshots Select With prefix 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH ggxKqU"
+                className="Select__SelectSuffix-klejCH kVNaRO"
               >
                 <svg
                   className={undefined}
@@ -3982,7 +3982,7 @@ exports[`Storyshots Select With small size 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk kUlEOp"
+                className="Select__StyledSelect-eyhbyk llsYGa"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -4009,7 +4009,7 @@ exports[`Storyshots Select With small size 1`] = `
                 </option>
               </select>
               <div
-                className="Select__SelectSuffix-klejCH fUxPMP"
+                className="Select__SelectSuffix-klejCH dWlRIr"
               >
                 <svg
                   className={undefined}
diff --git a/src/Select/index.js b/src/Select/index.js
index 32b63508ee..e3b615920d 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -43,6 +43,7 @@ const StyledSelect = styled(
   outline: none;
   width: 100%;
   transition: box-shadow ${({ theme }) => theme.orbit.durationFast} ease-in-out;
+  z-index: 2;
 
   &::-ms-expand {
     display: none;
@@ -125,6 +126,7 @@ const SelectSuffix = styled(({ children, className }) => (
   color: ${({ theme, disabled }) =>
     disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput};
   pointer-events: none;
+  z-index: 2;
 
   & > * {
     width: ${({ theme, size }) => size === SIZE_OPTIONS.SMALL && theme.orbit.widthIconSmall};