I've been facing an issue when using a textbox component inside a repeater-group component.
What I'm trying to achieve is retrieving form items from a server then displaying the proper components for the form.
After I open the component settings form and once the data is retrieved, it takes about 2 to 3 seconds for the textbox components to render, then if I save the settings form and open it again, the textbox components don't render at all!
I've provided the test component code that I used to reproduce this issue.
exports.id = 'repeatergrouptest';
exports.title = 'Repeater Group Test';
exports.group = 'Form';
exports.color = '#888600';
exports.icon = 'code';
exports.input = true;
exports.output = 0;
exports.version = '1.0.0';
exports.author = '';
exports.options = {
datasource: [],
formId: null,
};
exports.readme = ``;
exports.html = `
<div class="padding">
<div data-jc="textbox" data-jc-path="formId">Form</div>
<div style="margin-top:40px;" data-jc="repeater-group__datasource__group:group">
<script type="text/html">
<div>
<div data-jc="textbox" data-jc-path="datasource[$index].name" data-jc-config="disabled:true;">Name</div>
<div data-jc="textbox" data-jc-path="datasource[$index].defaultValue">Value</div>
<br />
</div>
</script>
<script type="text/html">
<div style="font-size:16px;font-weight:bold;margin-bottom:10px">{{ group }} ({{ index + 1 }}/{{ length }})</div>
<div>
{{ body | raw }}
</div>
</script>
</div>
</div>
<script>
ON('open.repeatergrouptest', function(component, options) {
var datasource = [];
setTimeout(() => {
datasource.push({ name: 'Name 1', defaultValue: 'Jeans', group: 'group1'});
datasource.push({ name: 'Name 2', defaultValue: 'Shoes', group: 'group1'});
datasource.push({ name: 'Name 3', defaultValue: 'Shoes', group: 'group2'});
datasource.push({ name: 'Name 4', defaultValue: 'Jeans', group: 'group2'});
SET('settings.repeatergrouptest.datasource', datasource);
}, 1000);
});
</script>
`;
exports.install = function (instance) {};