fix: 🐛 Fixs dropdown font size and renders empty label - -

Fixes* ✅ Closes: #30
SelectQuoteLabs · Dec 22, 2020 · 2308d55 · 2308d55
1 parent 40d1e42
commit 2308d55
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/components/SQForm/SQFormMultiSelect.js b/src/components/SQForm/SQFormMultiSelect.js
@@ -10,6 +10,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import ListItemText from '@material-ui/core/ListItemText';
 import Tooltip from '@material-ui/core/Tooltip';
 import {useSQFormContext} from '../../../src';
+import {EMPTY_LABEL} from '../../utils/constants';
 import {useForm} from './useForm';
 
 /**
@@ -109,12 +110,14 @@ function SQFormMultiSelect({
    * e.g., if value is an "ID"
    */
   const getRenderValue = selected => {
-    const selectedChildren = children
+    if (!selected.length) {
+      return EMPTY_LABEL;
+    }
+
+    return children
       ?.filter(child => selected.includes(child.value))
       ?.map(child => child.label)
       ?.join(', ');
-
-    return selectedChildren;
   };
 
   return (
@@ -129,6 +132,7 @@ function SQFormMultiSelect({
       >
         <Select
           multiple
+          displayEmpty
           input={<Input disabled={isDisabled} name={name} />}
           value={field.value}
           onBlur={handleBlur}
@@ -145,14 +149,20 @@ function SQFormMultiSelect({
               value={children.length === field.value.length ? 'NONE' : 'ALL'}
             >
               <Checkbox checked={children.length === field.value.length} />
-              <ListItemText primary="Select All" />
+              <ListItemText
+                primary="Select All"
+                primaryTypographyProps={{variant: 'body2'}}
+              />
             </MenuItem>
           )}
           {children.map(option => {
             return (
               <MenuItem key={option.value} value={option.value}>
                 <Checkbox checked={field.value.includes(option.value)} />
-                <ListItemText primary={option.label} />
+                <ListItemText
+                  primary={option.label}
+                  primaryTypographyProps={{variant: 'body2'}}
+                />
               </MenuItem>
             );
           })}

diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -0,0 +1 @@
+export const EMPTY_LABEL = '- -';