From 2308d558e7e2cba3605b8a5601590732d39d874d Mon Sep 17 00:00:00 2001
From: Sean Groff <sean.groff@selectquote.com>
Date: Tue, 22 Dec 2020 10:23:25 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fixs=20dropdown=20font=20?=
 =?UTF-8?q?size=20and=20renders=20empty=20label=20-=20-?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes*

✅ Closes: #30
---
 src/components/SQForm/SQFormMultiSelect.js | 20 +++++++++++++++-----
 src/utils/constants.js                     |  1 +
 2 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/constants.js

diff --git a/src/components/SQForm/SQFormMultiSelect.js b/src/components/SQForm/SQFormMultiSelect.js
index 24571c78..68365a91 100644
--- 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
new file mode 100644
index 00000000..22312181
--- /dev/null
+++ b/src/utils/constants.js
@@ -0,0 +1 @@
+export const EMPTY_LABEL = '- -';