This problem only occurs in the published form, not in the preview. In the Templates tab of the edit grid, I'm trying to use the 'Show as modal' option.
When I add the first item after publishing, it adds without a problem. When I press 'Add Another' to add the second item, the layout suddenly crashes after about a second. I can't even close it because neither save nor close works.
I have created a form below with the simplest possible conditions to find the cause.
{
"title": "test",
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" color=\"#d9730f\" stroke=\"#d9730f\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"transparent\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2\"></path><path d=\"M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z\"></path><path d=\"M9 14h.01\"></path><path d=\"M9 17h.01\"></path><path d=\"M12 16l1 1l3 -3\"></path>\n</svg>",
"schema": {
"display": "form",
"components": [
{
"label": "Edit Grid (Repeating Section)",
"labelPosition": "top",
"description": "",
"tooltip": "",
"customClass": "",
"customClassAdvanced": "",
"tabindex": "",
"disableAddingRemovingRows": false,
"conditionalAddButton": "",
"pdfVisibility": "visible",
"hidden": false,
"hideLabel": false,
"autofocus": false,
"disabled": false,
"tableView": false,
"modalEdit": false,
"templates": {
"header": "<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (displayValue(component)) { %}\n <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n {% } %}\n {% }) %}\n </div>",
"tableHeader": "\n <tr>\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <td class=\"editgrid-table-column\">{{ component.label }}</td>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <td class=\"editgrid-table-column\">Actions</td>\n {% } %}\n </tr>\n ",
"row": "<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (displayValue(component)) { %}\n <div class=\"col-sm-2\">\n {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n </div>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <div class=\"col-sm-2\">\n <div class=\"btn-group pull-right\">\n <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n {% } %}\n </div>\n </div>\n {% } %}\n </div>",
"tableRow": "\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <td class=\"editgrid-table-column\">\n {{ getView(component, row[component.key]) }}\n </td>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <td class=\"editgrid-table-column\">\n <div class=\"btn-group\">\n <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n {% } %}\n </div>\n </td>\n {% } %}\n ",
"footer": ""
},
"rowClass": "",
"addAnother": "",
"modal": true,
"saveRow": "",
"removeRow": "Cancel",
"inlineEdit": false,
"redrawOn": "",
"clearOnHide": true,
"customDefaultValue": "",
"calculateValue": "",
"allowCalculateOverride": false,
"validateOn": "change",
"validate": {
"required": false,
"customMessage": "",
"custom": "",
"customPrivate": false,
"strictDateValidation": false,
"multiple": false,
"unique": false
},
"rowDrafts": false,
"errorLabel": "",
"errors": "",
"key": "editGrid",
"tags": [],
"properties": {},
"conditional": {
"show": null,
"when": null,
"eq": ""
},
"customConditional": "",
"logic": [],
"onChange": "",
"attributes": {},
"creatorPermissions": "",
"permissions": [
{
"user": {},
"permissionLevel": ""
}
],
"type": "editgrid",
"displayAsTable": false,
"input": true,
"components": [
{
"label": "Text Field",
"applyMaskOn": "change",
"pdfVisibility": "visible",
"tableView": true,
"key": "textField",
"permissions": [
{
"user": {},
"permissionLevel": ""
}
],
"type": "textfield",
"input": true,
"skipRemoveConfirm": true,
"placeholder": "",
"prefix": "",
"customClass": "",
"suffix": "",
"multiple": false,
"defaultValue": null,
"protected": false,
"unique": false,
"persistent": true,
"hidden": false,
"clearOnHide": true,
"refreshOn": "",
"redrawOn": "",
"modalEdit": false,
"dataGridLabel": false,
"labelPosition": "top",
"description": "",
"errorLabel": "",
"tooltip": "",
"hideLabel": false,
"tabindex": "",
"disabled": false,
"autofocus": false,
"dbIndex": false,
"customDefaultValue": "",
"calculateValue": "",
"calculateServer": false,
"widget": {
"type": "input"
},
"attributes": {},
"validateOn": "change",
"validate": {
"required": false,
"custom": "",
"customPrivate": false,
"strictDateValidation": false,
"multiple": false,
"unique": false,
"minLength": "",
"maxLength": "",
"pattern": ""
},
"conditional": {
"show": null,
"when": null,
"eq": ""
},
"overlay": {
"style": "",
"left": "",
"top": "",
"width": "",
"height": ""
},
"allowCalculateOverride": false,
"encrypted": false,
"showCharCount": false,
"showWordCount": false,
"properties": {},
"allowMultipleMasks": false,
"addons": [],
"mask": false,
"inputType": "text",
"inputFormat": "plain",
"inputMask": "",
"displayMask": "",
"spellcheck": true,
"truncateMultipleSpaces": false
}
],
"skipRemoveConfirm": true,
"placeholder": "",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": null,
"protected": false,
"unique": false,
"persistent": true,
"refreshOn": "",
"dataGridLabel": false,
"dbIndex": false,
"calculateServer": false,
"widget": null,
"overlay": {
"style": "",
"left": "",
"top": "",
"width": "",
"height": ""
},
"encrypted": false,
"showCharCount": false,
"showWordCount": false,
"allowMultipleMasks": false,
"addons": [],
"tree": true,
"lazyLoad": false,
"defaultOpen": false,
"openWhenEmpty": false
},
{
"type": "button",
"label": "Submit",
"key": "submit",
"size": "md",
"block": false,
"action": "submit",
"disableOnInvalid": false,
"theme": "primary",
"input": true,
"placeholder": "",
"prefix": "",
"customClass": "",
"suffix": "",
"multiple": false,
"defaultValue": null,
"protected": false,
"unique": false,
"persistent": false,
"hidden": false,
"clearOnHide": true,
"refreshOn": "",
"redrawOn": "",
"tableView": false,
"modalEdit": false,
"dataGridLabel": true,
"labelPosition": "top",
"description": "",
"errorLabel": "",
"tooltip": "",
"hideLabel": false,
"tabindex": "",
"disabled": false,
"autofocus": false,
"dbIndex": false,
"customDefaultValue": "",
"calculateValue": "",
"calculateServer": false,
"widget": {
"type": "input"
},
"attributes": {},
"validateOn": "change",
"validate": {
"required": false,
"custom": "",
"customPrivate": false,
"strictDateValidation": false,
"multiple": false,
"unique": false
},
"conditional": {
"show": null,
"when": null,
"eq": ""
},
"overlay": {
"style": "",
"left": "",
"top": "",
"width": "",
"height": ""
},
"allowCalculateOverride": false,
"encrypted": false,
"showCharCount": false,
"showWordCount": false,
"properties": {},
"allowMultipleMasks": false,
"addons": [],
"leftIcon": "",
"rightIcon": "",
"skipRemoveConfirm": true
}
]
}
}