Fix zindex layering when connectLeft if focused with suffix

SparkPost · Apr 8, 2019 · 26b40b6 · 26b40b6
1 parent 6973e8f
commit 26b40b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/matchbox/src/components/TextField/TextField.module.scss b/packages/matchbox/src/components/TextField/TextField.module.scss
@@ -81,5 +81,4 @@
 
 .InputWrapper {
   position: relative;
-  z-index: 1;
 }
diff --git a/stories/form/TextField.stories.js b/stories/form/TextField.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
-import { Autorenew } from '@sparkpost/matchbox-icons';
+import { Autorenew, Search } from '@sparkpost/matchbox-icons';
 import StoryContainer from '../storyHelpers/StoryContainer';
 import { TextField, Button, Select, Tooltip } from '@sparkpost/matchbox';
 
@@ -79,4 +79,16 @@ export default storiesOf('Form|TextField', module)
         suffix={<Autorenew />}
         style={{ textAlign: 'right' }}
       />
+  )))
+
+  .add('with connected component and suffex', withInfo()(() => (
+      <TextField
+        id='id'
+        label='Date Range'
+        value='July 21, 2017 - July 28, 2017'
+        connectLeft={<Select options={
+          ['Last 24 Hours', 'Last Week']
+        }/>}
+        suffix={<Search />}
+      />
   )));