Minimum Items validation in multiple choice inputs is not working

[spacebaboon]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

I'm using an array with "ui:widget": "checkboxes" to render a checkbox group in a form, and minItems=1 to validate that the user has selected at least one item.
When a form is first rendered, we have no formData, so this is the initial state is undefined formData for the field, not an empty array.
The minItems is causing an extra 'undefined' entry to be added to the formData, which means that the validation does not work, as this entry stays here no matter what the user selects.

Steps to Reproduce

This can be seen easily in the playground, under Arrays. Add "minItems": 1 to the multipleChoicesList section, and then delete the whole entry for multipleChoicesList from the formData section.

Now click one of the checkboxes in the live demo and see what happens to the formData. A null entry is added after the selected values. Make it "minItems": 2, delete the formData entry and try again, and 2 null entries are added. This means that the minimum items validation does not work.

I thought that I could set a default empty array for the field, by adding default: [] in the schema, but this changes the nulls to empty arrays.

Expected behavior

When the user has no items selected, a minimum items validation error message should be shown.

Actual behavior

The minimum items error is not shown.

Version

0.44.0

[jcarvin]

I am having the same issue. But when I add 'minItems' to the checkboxes in the playground it seems to work perfectly. My Schema is nearly identical.

Have you made any progress on figuring this out?

edit: minItems in 9c849c1 works properly.

[spacebaboon]

@jcarvin did you remove the formData for the checkboxes in the playground, as per my steps above? The issue was caused by changes in #434, but I don't understand why that change was made. We have written a work-around for now, to programmatically add an empty formData array where a checkbox group with minItems is found, before the form is rendered. If @n1k0 and/or other project owners agree it's a bug, I could write a PR, if we can agree a solution.

[jcarvin]

@spacebaboon oh, okay. I didn't do that in the playground. I just reverted my repo to 9c849c1 for now.

Thanks for the follow up!

[glasserc]

Thanks for the report! That definitely sounds like a bug. I think the minItems support was meant to add empty text entry fields -- I'm not sure it makes sense to prepopulate arrays that are using the "checkbox" style. Given that, I think putting changes in populateDefaults is the wrong place to put them. Maybe we could put them in ArrayField instead, and only if the type isn't checkboxes?

[spacebaboon]

Changing the behaviour of default in arrays could also work. I don't know if there is a prescribed behaviour in the JSF specs. Maybe default at the root level, alongside type="array" would set the default value for the array, so that we could set an empty array as default. and default in the items section could determine what the item default is. Currently default at the root level sets the item default.
But this could be a breaking change for some users.

[MysticEyeBlink]

Ping ;) Any progress with this? It would be great to have it fixed

[glasserc]

#579 is making some changes to population defaults, which might be relevant?

[spacebaboon]

@glasserc I'm looking into this again now. I think @olzraiti is working in a similar area with PR #579, but that doesn't fix this particular problem. I've also written PR #655, which is a similar but less comprehensive PR to sort out the minItems vs default items bug, #631, but that doesn't solve this either.

So I'm working on a PR for this particular issue now. I agree that we don't want to pass the uiSchema into utils if we can help it, but as far as I can see, the default values are calculated in Form, before ArrayField comes into play, so I think the changes need to go in utils.

Looking at the documentation, the multiple select elements, which we don't want to populate with empty items (checkboxes and multi selects) are determined by there being an enum in items, and uniqueItems being false.
https://github.com/mozilla-services/react-jsonschema-form#multiple-choices-list

So I reckon we could just check this condition, and not add the extra items if so. It works in the playground. Would you agree with that conclusion?

[spacebaboon]

utils.js already had an isMultiSelect function, which did the job perfectly.