styles react-select

src/client/components/forms/field-types/Select/index.js

@@ -23,6 +23,7 @@ const Select = (props) => {
     errorMessage,
     label,
     options,
+    hasMany,
   } = props;
 
   const {
@@ -56,11 +57,12 @@ const Select = (props) => {
       <Label htmlFor={name} label={label} required={required} />
       <ReactSelect
         value={options.find(option => option.value === value)}
-        onChange={selected => onFieldChange(selected.value)}
+        onChange={selected => onFieldChange(hasMany ? selected : selected.value)}
         disabled={formProcessing ? 'disabled' : undefined}
         components={{ DropdownIndicator: Arrow }}
         className="react-select"
         classNamePrefix="rs"
+        isMulti={hasMany}
         id={name}
         name={name}
         options={options.map((option, i) => {
@@ -94,6 +96,7 @@ Select.defaultProps = {
   id: null,
   name: 'select',
   defaultValue: null,
+  hasMany: false,
 };
 
 Select.propTypes = {
@@ -126,6 +129,7 @@ Select.propTypes = {
       }),
     ),
   ]).isRequired,
+  hasMany: PropTypes.bool,
 };
 
 export default Select;

src/client/components/forms/field-types/Select/index.scss

@@ -20,6 +20,10 @@
         padding-top: 0;
         padding-bottom: 0;
       }
+
+      &--is-multi {
+        margin-left: - base(.25);
+      }
     }
 
     .rs__indicators {
@@ -35,6 +39,13 @@
       display: none;
     }
 
+    .rs__input {
+      input {
+        font-family: $font-brand;
+        width: 100% !important;
+      }
+    }
+
     .rs__menu {
       border-radius: 0;
       @extend %inputShadowActive;
@@ -54,6 +65,29 @@
         background-color: rgba($primary, .5);
       }
     }
+
+    .rs__multi-value {
+      padding: 0;
+      background: transparent;
+      border: $stroke-width solid $black;
+      line-height: base(.8);
+      margin: base(.475) base(.475) base(.475) 0;
+    }
+
+    .rs__multi-value__label {
+      @extend %uppercase-label;
+      padding: 0 base(.375);
+    }
+
+    .rs__multi-value__remove {
+      padding: 0 base(.25);
+      cursor: pointer;
+
+      &:hover {
+        color: $black;
+        background: rgba($error, .25);
+      }
+    }
   }
 
   &.error {

src/client/components/forms/useFieldType/index.js

@@ -55,7 +55,7 @@ const useFieldType = (options) => {
     formSubmitted: submitted,
     formProcessing: processing,
     onFieldChange: (e) => {
-      if (e.target) {
+      if (e && e.target) {
         sendField(e.target.value);
       } else {
         sendField(e);

src/client/scss/type.scss

@@ -78,8 +78,8 @@
 
 %uppercase-label {
   text-transform: uppercase;
-  letter-spacing: base(.1);
-  font-size: base(.3);
+  letter-spacing: base(.0875);
+  font-size: base(.325);
   font-family: $font-label;
   -webkit-font-smoothing: auto;
 

src/mongoose/schema/fieldToSchemaMap.js

@@ -55,10 +55,7 @@ const fieldToSchemaMap = {
   },
   repeater: (field) => {
     const schema = {};
-    if (field.id === false) {
-      // eslint-disable-next-line no-underscore-dangle
-      schema._id = false;
-    }
+
     field.fields.forEach((subField) => {
       schema[subField.name] = fieldToSchemaMap[subField.type](subField);
     });