Enable the arrays to be marked as "required"

README.md

@@ -557,6 +557,8 @@ const uiSchema = {
 };
 ```
 
+In addition it is valid to maked an array as "required".  This means the user must select at least one items to add to the array.
+
 See the "Arrays" section of the playground for cool demos.
 
 ### Autogenerated widget ids

src/components/fields/ArrayField.js

@@ -109,8 +109,12 @@ class ArrayField extends Component {
   onDropIndexClick = (index) => {
     return (event) => {
       event.preventDefault();
+      var newitems = this.state.items.filter((_, i) => i !== index);
+      if (newitems.length == 0) {
+        newitems = undefined;
+      }
       this.asyncSetState({
-        items: this.state.items.filter((_, i) => i !== index)
+        items: newitems
       }, {validate: true}); // refs #195
     };
   };
@@ -175,12 +179,12 @@ class ArrayField extends Component {
       autofocus,
     } = this.props;
     const title = (schema.title === undefined) ? name : schema.title;
-    const {items} = this.state;
     const {definitions, fields} = this.props.registry;
     const {TitleField, DescriptionField} = fields;
     const itemsSchema = retrieveSchema(schema.items, definitions);
     const {addable=true} = getUiOptions(uiSchema);
-
+    var {items} = this.state;
+    items = items || [];
     return (
       <fieldset
         className={`field field-array field-array-of-${itemsSchema.type}`}>
@@ -220,7 +224,7 @@ class ArrayField extends Component {
   }
 
   renderMultiSelect() {
-    const {schema, idSchema, uiSchema, disabled, readonly, autofocus} = this.props;
+    const {schema, idSchema, uiSchema, disabled, required, readonly, autofocus} = this.props;
     const {items} = this.state;
     const {widgets, definitions} = this.props.registry;
     const itemsSchema = retrieveSchema(schema.items, definitions);
@@ -231,6 +235,7 @@ class ArrayField extends Component {
       <Widget
         id={idSchema && idSchema.$id}
         multiple
+        required={required}
         onChange={this.onSelectChange}
         options={options}
         schema={schema}

src/components/widgets/CheckboxesWidget.js

@@ -10,7 +10,12 @@ function selectValue(value, selected, all) {
 }
 
 function deselectValue(value, selected) {
-  return selected.filter(v => v !== value);
+  var ret = selected.filter(v => v !== value);
+  if (ret.length == 0) {
+    return undefined;
+  } else {
+    return ret;    
+  }  
 }
 
 function CheckboxesWidget(props) {
@@ -19,7 +24,7 @@ function CheckboxesWidget(props) {
   return (
     <div className="checkboxes" id={id}>{
       enumOptions.map((option, index) => {
-        const checked = value.indexOf(option.value) !== -1;
+        const checked = (value === undefined) ? false : value.indexOf(option.value) !== -1;
         const disabledCls = disabled ? "disabled" : "";
         const checkbox = (
           <span>