diff --git a/src/app/form/widgets/ArrayWidget.js b/src/app/form/widgets/ArrayWidget.js index 92d934c6..5f9d02cd 100644 --- a/src/app/form/widgets/ArrayWidget.js +++ b/src/app/form/widgets/ArrayWidget.js @@ -15,7 +15,8 @@ const renderArrayFields = ( fieldName, remove, context, - swap + swap, + required, ) => { const prefix = fieldName + "."; @@ -26,16 +27,22 @@ const renderArrayFields = ( isSummary = true; } schema.isSummary = isSummary; + + // We always show the button for removing the field unless + // it's the first field of a required array field (ie. we don't allow its + // removal). + const show_close_button = (required && idx > 0) || !required; + return (
-
+ {show_close_button &&
{ e.preventDefault(); remove(idx); }} /> -
+
} {renderField( { ...schema, showLabel: false }, idx.toString(), @@ -57,6 +64,11 @@ const renderInput = field => { { "has-error": field.meta.submitFailed && field.meta.error } ]); + /* Pre-add a field if the array field is required. */ + if (field.fields.length == 0 && field.schema.required) { + field.fields.push(); + } + return (
{field.showLabel && ( @@ -74,7 +86,8 @@ const renderInput = field => { field.context, (a, b) => { field.fields.swap(a, b); - } + }, + field.schema.required, )}
field.fields.push()}> diff --git a/src/test/rf.test.js b/src/test/rf.test.js index 37eb9ab2..988acd9e 100644 --- a/src/test/rf.test.js +++ b/src/test/rf.test.js @@ -61,5 +61,5 @@ it('editorForm renders correctly', async () => { ); const inputs = wrapper.find('input'); - expect(inputs.length).toBe(54); + expect(inputs.length).toBe(55); })