Fix behaviour of arrays with minItems and default (rjsf-team#663)

Fix bug whereby defaults in an array were munged together and added to extra item's formData. Behaviour now is to fill the array with the object level default array, and then add extra items up to minItems. These extra items will be either empty or the item-level default. Added demonstration of this in the Arrays tab of the playground.

Author: spacebaboon

playground/samples/arrays.js

@@ -57,6 +57,16 @@ module.exports = {
  $ref: "#/definitions/Thing",
  },
  },
+ defaultsAndMinItems: {
+ type: "array",
+ title: "List and item level defaults",
+ minItems: 5,
+ default: ["carp", "trout", "bream"],
+ items: {
+ type: "string",
+ default: "unidentified",
+ },
+ },
  nestedList: {
  type: "array",
  title: "Nested list",

src/utils.js

@@ -141,9 +141,19 @@ function computeDefaults(schema, parentDefaults, definitions = {}) {
  case "array":
  if (schema.minItems) {
  if (!isMultiSelect(schema, definitions)) {
- return new Array(schema.minItems).fill(
- computeDefaults(schema.items, defaults, definitions)
- );
+ const defaultsLength = defaults ? defaults.length : 0;
+ if (schema.minItems > defaultsLength) {
+ const defaultEntries = defaults || [];
+ // populate the array with the defaults
+ const fillerEntries = new Array(
+ schema.minItems - defaultsLength
+ ).fill(
+ computeDefaults(schema.items, schema.items.defaults, definitions)
+ );
+ // then fill up the rest with either the item default or empty, up to minItems
+
+ return defaultEntries.concat(fillerEntries);
+ }
  } else {
  return [];
  }

test/ArrayField_test.js

@@ -410,6 +410,76 @@ describe("ArrayField", () => {
  expect(inputs[1].value).eql("Default name");
  });
 
+ it("should render an input for each default value, even when this is greater than minItems", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ turtles: {
+ type: "array",
+ minItems: 2,
+ default: ["Raphael", "Michaelangelo", "Donatello", "Leonardo"],
+ items: {
+ type: "string",
+ },
+ },
+ },
+ };
+ const { node } = createFormComponent({ schema: schema });
+ const inputs = node.querySelectorAll("input[type=text]");
+ expect(inputs.length).to.eql(4);
+ expect(inputs[0].value).to.eql("Raphael");
+ expect(inputs[1].value).to.eql("Michaelangelo");
+ expect(inputs[2].value).to.eql("Donatello");
+ expect(inputs[3].value).to.eql("Leonardo");
+ });
+
+ it("should render enough input to match minItems, populating the first with default values, and the rest empty", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ turtles: {
+ type: "array",
+ minItems: 4,
+ default: ["Raphael", "Michaelangelo"],
+ items: {
+ type: "string",
+ },
+ },
+ },
+ };
+ const { node } = createFormComponent({ schema });
+ const inputs = node.querySelectorAll("input[type=text]");
+ expect(inputs.length).to.eql(4);
+ expect(inputs[0].value).to.eql("Raphael");
+ expect(inputs[1].value).to.eql("Michaelangelo");
+ expect(inputs[2].value).to.eql("");
+ expect(inputs[3].value).to.eql("");
+ });
+
+ it("should render enough input to match minItems, populating the first with default values, and the rest with the item default", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ turtles: {
+ type: "array",
+ minItems: 4,
+ default: ["Raphael", "Michaelangelo"],
+ items: {
+ type: "string",
+ default: "Unknown",
+ },
+ },
+ },
+ };
+ const { node } = createFormComponent({ schema });
+ const inputs = node.querySelectorAll("input[type=text]");
+ expect(inputs.length).to.eql(4);
+ expect(inputs[0].value).to.eql("Raphael");
+ expect(inputs[1].value).to.eql("Michaelangelo");
+ expect(inputs[2].value).to.eql("Unknown");
+ expect(inputs[3].value).to.eql("Unknown");
+ });
+
  it("should not add minItems extra formData entries when schema item is a multiselect", () => {
  const schema = {
  type: "object",