This is probably an Ansel issue, and I’m pretty sure this isn’t the first time this has been reported. This is probably a known issue for TJ.

I’ll try take a look at this in the next few days, but based on Aasun’s description it sounds like Ansel doesn’t have an onDisplay or onClone event handler? Once the bloq is added to the page, it updates the input field names. If a field type then adds more elements to the page then it needs to be responsible for updating its own field names. I say this without investigating it myself, just explaining the order of operations. If the field names are hidden in a <template> tag then it not sure Bloqs can target it and be responsible for updating it.

Some months ago, maybe even a year ago, I had to refactor how Bloqs creates the new bloqs so it worked with cloning existing bloqs, and all its children, as well as inserting new ones, while maintaining the ability to trigger the onDisplay events for a bloq and all it’s children. The old way literally used jQuery’s .html() function to get all the html inside of a bloq (as well as it’s children), so updating the field names was easy b/c it was one big regex replace, however, this did not work well when the bloq had to be re-inserted into the page because it was raw html, and all the events bound to elements within that html were lost. If you look at the cp.js file, line 702 you’ll see the createBlock method which is the single method where all this is handled, and it is maintaining the dom and all the bound events and just using jQuery to update the field names. Because of this I’m suspecting that jQuery won’t look inside of a [removed] or <template> tag and update the html. I had to make a couple of updates to Simple Grids and Tables b/c it too is using a <template> tag. For example here is what I did in SG&T in the grid.js file (since Bloqs is trigger Grid events)

var onDisplay = function(cell) {
    var isBloqs = cell.hasClass('blocksft-atom');

    if (isBloqs) {
        $(cell).on('grid:addRow', function(element) {
            var $simpleGridField = $(element.target);
            var $newRow = $simpleGridField.find('tr').last();

            // Used to not have to do this, but when Bloqs' cloning/inserting of new bloqs was introduced
            // it might have broken something. https://boldminded.com/support/ticket/2335
            $newRow.find('[name]').each(function() {
                var $field = $(this);
                var blockId = $field.closest('.blocksft-block').data('id');
                var eleName = $field.attr('name');

                $field.attr('name', eleName
                    .replace(
                        /blocks_new_block_\d+/gm,
                        blockId
                    ));
            });
        });

        return;
    }

};

Unfortunately, TJ, I think this is an issue you might have to address on your side :( I spent a lot of time working on Bloqs’ cloning and inserting functionality and it’s probably not something I’m going to go back to and try to refactor again. It seems to work fine for everything, unless it uses a [removed] or <template> tag to hold its html template contents.

Documentation updated. https://docs.boldminded.com/bloqs/docs/developers#step-1.b-depending-on-the-complexity-of-your-fieldtype