Enable Arrays to be marked as required, and fixes for strings marked as required

README.md

@@ -558,6 +558,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

@@ -216,8 +216,12 @@ class ArrayField extends Component {
       if (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
     };
   };
@@ -327,7 +331,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);
@@ -338,6 +342,7 @@ class ArrayField extends Component {
       <Widget
         id={idSchema && idSchema.$id}
         multiple
+        required={required}
         onChange={this.onSelectChange}
         options={options}
         schema={schema}

src/components/widgets/BaseInput.js

@@ -8,21 +8,25 @@ function BaseInput(props) {
     value,
     readonly,
     autofocus,
-    onChange,
     options,  // eslint-disable-line
     schema,   // eslint-disable-line
     formContext,  // eslint-disable-line
     registry, // eslint-disable-line
     ...inputProps
   } = props;
+  const _onChange = props.onChange;
   return (
     <input
       {...inputProps}
       className="form-control"
       readOnly={readonly}
       autoFocus={autofocus}
       value={typeof value === "undefined" ? "" : value}
-      onChange={(event) => onChange(event.target.value)}/>
+      onChange={(event) => {if (event.target.value == "") {
+        return _onChange(undefined);
+      } else {
+        return _onChange(event.target.value);
+      }}}/>
   );
 }
 

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>

src/components/widgets/TextareaWidget.js

@@ -12,6 +12,7 @@ function TextareaWidget({
   autofocus,
   onChange
 }) {
+  const _onChange = onChange;
   return (
     <textarea
       id={id}
@@ -22,7 +23,11 @@ function TextareaWidget({
       disabled={disabled}
       readOnly={readonly}
       autoFocus={autofocus}
-      onChange={(event) => onChange(event.target.value)}/>
+      onChange={(event) => {if (event.target.value == "") {
+        return _onChange(undefined);
+      } else {
+        return _onChange(event.target.value);
+      }}}/>
   );
 }