diff --git a/demo/collections/Category.js b/demo/collections/Category.js
index 8c3a88c04d..4299c61f55 100644
--- a/demo/collections/Category.js
+++ b/demo/collections/Category.js
@@ -40,8 +40,8 @@ module.exports = {
// hasMany: false,
// },
{
- name: 'role',
- label: 'Role',
+ name: 'demo-select',
+ label: 'Demo Select',
type: 'select',
options: [{
value: 'Option 1',
@@ -58,7 +58,27 @@ module.exports = {
}],
defaultValue: 'Option 1',
required: true,
- saveToJWT: true,
+ },
+ {
+ name: 'demo-select-many',
+ label: 'Demo Select w/ hasMany',
+ type: 'select',
+ options: [{
+ value: 'Option 1',
+ label: 'Here is a label for Option 1',
+ }, {
+ value: 'Option 2',
+ label: 'Option 2 Label',
+ }, {
+ value: 'Option 3',
+ label: 'Option 3 Label',
+ }, {
+ value: 'Option 4',
+ label: 'Option 4 Label',
+ }],
+ defaultValue: 'Option 1',
+ required: true,
+ hasMany: true,
},
],
timestamps: true,
diff --git a/src/client/components/forms/field-types/Select/index.js b/src/client/components/forms/field-types/Select/index.js
index 973ec356cc..86e6507491 100644
--- a/src/client/components/forms/field-types/Select/index.js
+++ b/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) => {
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;
diff --git a/src/client/components/forms/field-types/Select/index.scss b/src/client/components/forms/field-types/Select/index.scss
index 0476658dfe..c8e47177ec 100644
--- a/src/client/components/forms/field-types/Select/index.scss
+++ b/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 {
diff --git a/src/client/components/forms/useFieldType/index.js b/src/client/components/forms/useFieldType/index.js
index 1cc69af5c0..7f7fbf2e73 100644
--- a/src/client/components/forms/useFieldType/index.js
+++ b/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);
diff --git a/src/client/scss/type.scss b/src/client/scss/type.scss
index 7df365a2a2..ca953ea65e 100644
--- a/src/client/scss/type.scss
+++ b/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;
diff --git a/src/mongoose/schema/fieldToSchemaMap.js b/src/mongoose/schema/fieldToSchemaMap.js
index 0b96fdb0ba..337fb4b655 100644
--- a/src/mongoose/schema/fieldToSchemaMap.js
+++ b/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);
});