Alpaca JS is not properly reordering array checkboxes

Question

I have an Alpaca JS form comprised of an array of items which each consist of a textbox and a checkbox. For some reason, when I change the order using the dynamic controls, it successfully renumbers the textbox but doesn't change the number of the checkbox. This also results in a duplicate name assigned if the same top button to dynamically add new fields is pressed. The end result is incorrect data being passed when the form is submitted. How can I fix this to properly renumber the checkboxes?

Here's a sample of the Alpaca configuration:

$("#form1").alpaca({
    "schema": {
        "title": "Testing checkbox array IDs",
        "description": "Testbox checkbox array test.",
        "type": "object",
        "properties": {
            "form-fields": {
                "title": "Fields",
                "description": "These are the fields.",
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "field-name": {
                            "type": "string",
                            "title": "Field Name",
                            "description": "Enter the name for this field.",
                            "required": true
                        },
                        "field-box": {
                            "type": "boolean",
                            "title": "Field Box",
                            "description": "Check this box.",
                            "default": false
                        }
                    }
                }
            }
        }
    }
});

Answer 1

I couldn't find a way to correct the behavior itself but I was able to work around it by adding a postRender event to the Alpaca definition as follows:

"postRender": function(control) {
    control.childrenByPropertyId["form-fields"].on("move", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
    control.childrenByPropertyId["form-fields"].on("add", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
    control.childrenByPropertyId["form-fields"].on("remove", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
}

This is a bit of a hack but it works because the parent object does get assigned the correct name value and the form will post with those values if the name is just copied down into the input elements.