#434 - Render empty array item fields when minItems is specified (#484)

* #434 - Render empty array item fields when minItems is specified

* Added tests + playground feature for minItems

* Lint issue

* Split tests: 2 assertions = 2 tests

* Don't fall back to array

playground/samples/arrays.js

@@ -1,5 +1,16 @@
 module.exports = {
   schema: {
+    definitions: {
+      Thing: {
+        type: "object",
+        properties: {
+          name: {
+            type: "string",
+            default: "Default name"
+          }
+        }
+      }
+    },
     type: "object",
     properties: {
       listOfStrings: {
@@ -15,7 +26,7 @@ module.exports = {
         title: "A multiple choices list",
         items: {
           type: "string",
-          enum: ["foo", "bar", "fuzz", "qux"],
+          enum: ["foo", "bar", "fuzz", "qux"]
         },
         uniqueItems: true
       },
@@ -38,6 +49,14 @@ module.exports = {
           type: "number"
         }
       },
+      minItemsList: {
+        type: "array",
+        title: "A list with a minimal number of items",
+        minItems: 3,
+        items: {
+          $ref: "#/definitions/Thing"
+        }
+      },
       nestedList: {
         type: "array",
         title: "Nested list",

src/utils.js

@@ -123,15 +123,22 @@ function computeDefaults(schema, parentDefaults, definitions={}) {
   if (typeof(defaults) === "undefined") {
     defaults = schema.default;
   }
-  // We need to recur for object schema inner default values.
-  if (schema.type === "object") {
-    return Object.keys(schema.properties).reduce((acc, key) => {
-      // Compute the defaults for this node, with the parent defaults we might
-      // have from a previous run: defaults[key].
-      acc[key] = computeDefaults(
-        schema.properties[key], (defaults || {})[key], definitions);
-      return acc;
-    }, {});
+
+  switch (schema.type) {
+    // We need to recur for object schema inner default values.
+    case "object":
+      return Object.keys(schema.properties).reduce((acc, key) => {
+        // Compute the defaults for this node, with the parent defaults we might
+        // have from a previous run: defaults[key].
+        acc[key] = computeDefaults(
+          schema.properties[key], (defaults || {})[key], definitions);
+        return acc;
+      }, {});
+
+    case "array":
+      if (schema.minItems) {
+        return new Array(schema.minItems).fill(computeDefaults(schema.items, defaults, definitions));
+      }
   }
   return defaults;
 }

test/ArrayField_test.js

@@ -295,6 +295,67 @@ describe("ArrayField", () => {
       expect(inputs[2].id).eql("root_foo_1_bar");
       expect(inputs[3].id).eql("root_foo_1_baz");
     });
+
+    it("should render enough inputs with proper defaults to match minItems in schema when no formData is set", () => {
+      const complexSchema = {
+        type: "object",
+        definitions: {
+          Thing: {
+            type: "object",
+            properties: {
+              name: {
+                type: "string",
+                default: "Default name"
+              }
+            }
+          }
+        },
+        properties: {
+          foo: {
+            type: "array",
+            minItems: 2,
+            items: {
+              $ref: "#/definitions/Thing"
+            }
+          }
+        }
+      };
+      let form = createFormComponent({schema: complexSchema, formData: { }});
+      let inputs = form.node.querySelectorAll("input[type=text]");
+      expect(inputs[0].value).eql("Default name");
+      expect(inputs[1].value).eql("Default name");
+    });
+
+    it("should honor given formData, even when it does not meet ths minItems-requirement", () => {
+      const complexSchema = {
+        type: "object",
+        definitions: {
+          Thing: {
+            type: "object",
+            properties: {
+              name: {
+                type: "string",
+                default: "Default name"
+              }
+            }
+          }
+        },
+        properties: {
+          foo: {
+            type: "array",
+            minItems: 2,
+            items: {
+              $ref: "#/definitions/Thing"
+            }
+          }
+        }
+      };
+      const form = createFormComponent({schema: complexSchema, formData: {foo: []}});
+      const inputs = form.node.querySelectorAll("input[type=text]");
+      expect(inputs.length).eql(0);
+    });
+
+
   });
 
   describe("Multiple choices list", () => {