feat(select): adds zIndex prop and ability to set empty value

8base · Oct 31, 2018 · 2224ad8 · 2224ad8
1 parent 182517f
commit 2224ad8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/atoms/dataEntry/Select/Select.js b/src/atoms/dataEntry/Select/Select.js
@@ -13,9 +13,10 @@ type SelectProps = {|
   value?: Object,
   loading?: boolean,
   hasError?: boolean,
+  zIndex?: string | number,
 |};
 
-const customStyles = ({ hasError }) => ({
+const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
   control: (style, { isFocused }) => ({
     ...style,
     minHeight: '4rem',
@@ -28,10 +29,17 @@ const customStyles = ({ hasError }) => ({
   }),
   menuPortal: (style) => ({
     ...style,
-    zIndex: Z_INDEX.DROPDOWN,
+    zIndex,
+  }),
+  placeholder: (style) => ({
+    ...style,
+    color: PALETTE.LIGHT_GRAY1,
+    whiteSpace: 'nowrap',
+  }),
+  indicatorSeparator: (style) => ({
+    ...style,
+    backgroundColor: PALETTE.WHITE,
   }),
-  placeholder: (style) => ({ ...style, color: PALETTE.LIGHT_GRAY1 }),
-  indicatorSeparator: (style) => ({ ...style, backgroundColor: PALETTE.WHITE }),
 });
 
 const Select = ({ loading, ...props }: SelectProps) => (
@@ -46,3 +54,4 @@ const Select = ({ loading, ...props }: SelectProps) => (
 );
 
 export { Select };
+
diff --git a/src/atoms/dataEntry/SelectField/SelectField.js b/src/atoms/dataEntry/SelectField/SelectField.js
@@ -49,9 +49,11 @@ class SelectField extends React.Component<SelectFieldProps> {
 
     const hasError = formUtils.hasError(meta);
 
-    const value = Array.isArray(input.value)
-      ? options.filter((option) => input.value.indexOf(option.value) !== -1)
-      : options.find((option) => option.value === input.value);
+    const value = (
+      Array.isArray(input.value)
+        ? options.filter((option) => input.value.indexOf(option.value) !== -1)
+        : options.find((option) => option.value === input.value)
+    ) || null;
 
     return {
       ...this.props,
@@ -78,3 +80,4 @@ class SelectField extends React.Component<SelectFieldProps> {
 }
 
 export { SelectField, theme };
+
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -9110,6 +9110,7 @@ exports[`Storyshots ATOMS/DATA ENTRY/Select default 1`] = `
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   box-sizing: border-box;
+  white-space: nowrap;
 }
 
 .emotion-1 {
@@ -9694,6 +9695,7 @@ exports[`Storyshots ATOMS/DATA ENTRY/Select stretch 1`] = `
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   box-sizing: border-box;
+  white-space: nowrap;
 }
 
 .emotion-1 {