@formio/js 5.0.0-rc.39 → 5.0.0-rc.40

package/lib/cjs/WebformBuilder.js

@@ -992,6 +992,7 @@ class WebformBuilder extends Component_1.default {
         }
     }
     updateComponent(component, changed) {
+        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
             this.preview.form = {
@@ -1003,13 +1004,14 @@ class WebformBuilder extends Component_1.default {
                         'autofocus',
                         'customConditional',
                     ])],
-                config: this.options.formConfig || {}
+                config: this.options.formConfig || {},
+                sanitizeConfig,
             };
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
             const previewElement = this.componentEdit.querySelector('[ref="preview"]');
             if (previewElement) {
-                this.setContent(previewElement, this.preview.render());
+                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);
                 this.preview.attach(previewElement);
             }
         }

package/lib/cjs/Wizard.js

@@ -722,7 +722,7 @@ class Wizard extends Webform_1.default {
                 if (this.enabledIndex) {
                     this.enabledIndex = 0;
                 }
-                this.onChange();
+                this.onChange({ resetValue: true });
                 this.redraw();
                 return this.page;
             });
@@ -880,6 +880,11 @@ class Wizard extends Webform_1.default {
         }
         return super.redraw();
     }
+    rebuild() {
+        const currentPage = this.page;
+        const setCurrentPage = () => this.setPage(currentPage);
+        return super.rebuild().then(setCurrentPage);
+    }
     checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {
         if (!this.checkCondition(row, data)) {
             this.setCustomValidity('');

package/lib/cjs/components/_classes/component/Component.js

@@ -778,6 +778,7 @@ class Component extends Element_1.default {
         return !this.component.label ||
             ((!this.isInDataGrid && this.component.hideLabel) ||
                 (this.isInDataGrid && !this.component.dataGridLabel) ||
+                this.options.floatingLabels ||
                 this.options.inputsOnly) && !this.builderMode;
     }
     transform(type, value) {
@@ -850,11 +851,7 @@ class Component extends Element_1.default {
     renderTemplate(name, data = {}, modeOption) {
         // Need to make this fall back to form if renderMode is not found similar to how we search templates.
         const mode = modeOption || this.options.renderMode || 'form';
-        data.component = Object.assign({}, this.component);
-        // Escape HTML provided in component description and render it as a string instead
-        if (this.component.description) {
-            data.component.description = FormioUtils.escapeHTML(this.component.description);
-        }
+        data.component = this.component;
         data.self = this;
         data.options = this.options;
         data.readOnly = this.options.readOnly;
@@ -1068,12 +1065,12 @@ class Component extends Element_1.default {
                 const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
                     .replace(/(?:\r\n|\r|\n)/g, '<br />');
                 this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {
-                    allowHTML: false,
+                    allowHTML: true,
                     trigger: 'mouseenter click focus',
                     placement: 'right',
                     zIndex: 10000,
                     interactive: true,
-                    content: this.t(tooltipText, { _userInput: true }),
+                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
                 });
             }
         });
@@ -1850,6 +1847,10 @@ class Component extends Element_1.default {
             this.setElementInvalid(this.performInputMapping(element), false);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
+        // do not set error classes for hidden components
+        if (!this.visible) {
+            return;
+        }
         if (hasErrors) {
             // Add error classes
             elements.forEach((input) => {
@@ -1949,7 +1950,7 @@ class Component extends Element_1.default {
                 placeholder: this.t(this.component.placeholder, { _userInput: true }),
                 modules: {
                     toolbar: [
-                        [{ 'size': ['small', false, 'large', 'huge'] }],
+                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
                         [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                         [{ 'font': [] }],
                         ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],
@@ -2203,10 +2204,12 @@ class Component extends Element_1.default {
         defaultValue = this.getCustomDefaultValue(defaultValue);
         const checkMask = (value) => {
             if (typeof value === 'string') {
-                const placeholderChar = this.placeholderChar;
-                value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;
-                if (!FormioUtils.matchInputMask(value, this.defaultMask)) {
-                    value = '';
+                if (this.component.type !== 'textfield') {
+                    const placeholderChar = this.placeholderChar;
+                    value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;
+                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {
+                        value = '';
+                    }
                 }
             }
             else {
@@ -2305,10 +2308,10 @@ class Component extends Element_1.default {
         }
         const input = this.performInputMapping(this.refs.input[index]);
         const valueMaskInput = this.refs.valueMaskInput;
-        if (valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) {
+        if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {
             valueMaskInput.mask.textMaskInputElement.update(value);
         }
-        if (input.mask) {
+        if (input.mask && input.mask.textMaskInputElement) {
             input.mask.textMaskInputElement.update(value);
         }
         else if (input.widget && input.widget.setValue) {
@@ -2465,8 +2468,8 @@ class Component extends Element_1.default {
     }
     /* eslint-disable max-statements */
     calculateComponentValue(data, flags, row) {
-        // Skip value calculation for the component if we don't have entire form data set
-        if (lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {
+        // Skip value calculation for the component if we don't have entire form data set or in builder mode
+        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {
             return false;
         }
         // If no calculated value or
@@ -2474,10 +2477,16 @@ class Component extends Element_1.default {
         const { clearOnHide } = this.component;
         const shouldBeCleared = !this.visible && clearOnHide;
         const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);
+        if (shouldBeCleared) {
+            // remove calculated value so that the value is recalculated once component becomes visible
+            if (this.hasOwnProperty('calculatedValue') && allowOverride) {
+                lodash_1.default.unset(this, 'calculatedValue');
+            }
+            return false;
+        }
         // Handle all cases when calculated values should not fire.
         if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||
             !(this.component.calculateValue || this.component.calculateValueVariable) ||
-            shouldBeCleared ||
             (this.options.server && !this.component.calculateServer) ||
             (flags.dataSourceInitialLoading && allowOverride)) {
             return false;
@@ -2504,7 +2513,7 @@ class Component extends Element_1.default {
                 this.calculationLocked = true;
                 return false;
             }
-            const firstPass = (this.calculatedValue === undefined);
+            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;
             if (firstPass) {
                 this.calculatedValue = null;
             }
@@ -2518,6 +2527,7 @@ class Component extends Element_1.default {
             }
             // Check to ensure that the calculated value is different than the previously calculated value.
             if (previousCalculatedValue && previousChanged && !calculationChanged) {
+                this.calculatedValue = null;
                 return false;
             }
             if (flags.isReordered || !calculationChanged) {
@@ -2525,7 +2535,7 @@ class Component extends Element_1.default {
             }
             if (fromSubmission) {
                 // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass
-                this.calculatedValue = calculatedValue;
+                this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
                 return false;
             }
             // If this is the firstPass, and the dataValue is different than to the calculatedValue.
@@ -2534,7 +2544,7 @@ class Component extends Element_1.default {
                 return true;
             }
         }
-        this.calculatedValue = calculatedValue;
+        this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
         if (changed) {
             if (!flags.noPristineChangeOnModified) {
                 this.pristine = false;
@@ -2954,6 +2964,7 @@ class Component extends Element_1.default {
         return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));
     }
     shouldSkipValidation(data, row, flags = {}) {
+        const { validateWhenHidden = false } = this.component || {};
         const rules = [
             // Do not validate if the flags say not too.
             () => flags.noValidate,
@@ -2964,9 +2975,9 @@ class Component extends Element_1.default {
             // Check to see if we are editing and if so, check component persistence.
             () => this.isValueHidden(),
             // Force valid if component is hidden.
-            () => !this.visible,
+            () => !this.visible && !validateWhenHidden,
             // Force valid if component is conditionally hidden.
-            () => !this.checkCondition(row, data)
+            () => !this.checkCondition(row, data) && !validateWhenHidden
         ];
         return rules.some(pred => pred());
     }

package/lib/cjs/components/_classes/component/editForm/Component.edit.logic.js

@@ -373,7 +373,7 @@ exports.default = [
                             {
                                 weight: 20,
                                 input: true,
-                                label: 'Schema Defenition',
+                                label: 'Schema Definition',
                                 key: 'schemaDefinition',
                                 editor: 'ace',
                                 as: 'javascript',

package/lib/cjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -23,6 +23,14 @@ exports.default = [
         key: 'unique',
         input: true
     },
+    {
+        weight: 100,
+        type: 'checkbox',
+        label: 'Validate When Hidden',
+        tooltip: 'Validates the component when it is hidden/conditionally hidden. Vaildation errors are displayed in the error alert on the form submission.',
+        key: 'validateWhenHidden',
+        input: true
+    },
     {
         weight: 0,
         type: 'select',

package/lib/cjs/components/_classes/component/fixtures/comp5.js

@@ -6,8 +6,8 @@ exports.default = {
     components: [
         {
             label: 'Text Field',
-            description: "<img src='https://somesite' onerror='var _ee = 2' >",
-            tooltip: "<img src='https://somesite' onerror='var _ee = 1' >",
+            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
+            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
             applyMaskOn: 'change',
             tableView: true,
             key: 'textField',

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -100,7 +100,7 @@ class Multivalue extends Field_1.default {
         if (this.refs.input && this.refs.input.length) {
             this.refs.input.forEach((input) => {
                 if (input.mask) {
-                    input.mask.destroy();
+                    input.mask.destroy ? input.mask.destroy() : input.mask.remove();
                 }
                 if (input.widget) {
                     input.widget.destroy();
@@ -110,7 +110,7 @@ class Multivalue extends Field_1.default {
         if (this.refs.mask && this.refs.mask.length) {
             this.refs.mask.forEach((input) => {
                 if (input.mask) {
-                    input.mask.destroy();
+                    input.mask.destroy ? input.mask.destroy() : input.mask.remove();
                 }
             });
         }

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -511,8 +511,8 @@ class NestedComponent extends Field_1.default {
         flags = flags || {};
         row = row || this.data;
         components = components && lodash_1.default.isArray(components) ? components : this.getComponents();
-        super.checkData(data, flags, row);
-        components.forEach((comp) => comp.checkData(data, flags, row));
+        super.checkData(data, Object.assign({}, flags), row);
+        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));
     }
     checkConditions(data, flags, row) {
         // check conditions of parent component first, because it may influence on visibility of it's children

package/lib/cjs/components/address/fixtures/comp3.js

@@ -14,7 +14,7 @@ exports.default = {
             providerOptions: {
                 params: {
                     autocompleteOptions: {},
-                    key: 'AIzaSyBNL2e4MnmyPj9zN7SVAe428nCSLP1X144',
+                    key: '',
                 },
             },
             input: true,

package/lib/cjs/components/builder.js

@@ -31,7 +31,6 @@ const Password_form_1 = __importDefault(require("./password/Password.form"));
 const PhoneNumber_form_1 = __importDefault(require("./phonenumber/PhoneNumber.form"));
 const Radio_form_1 = __importDefault(require("./radio/Radio.form"));
 const ReCaptcha_form_1 = __importDefault(require("./recaptcha/ReCaptcha.form"));
-const Resource_form_1 = __importDefault(require("./resource/Resource.form"));
 const SelectBoxes_form_1 = __importDefault(require("./selectboxes/SelectBoxes.form"));
 const Select_form_1 = __importDefault(require("./select/Select.form"));
 const Signature_form_1 = __importDefault(require("./signature/Signature.form"));
@@ -72,7 +71,6 @@ _1.default.password.editForm = Password_form_1.default;
 _1.default.phoneNumber.editForm = PhoneNumber_form_1.default;
 _1.default.radio.editForm = Radio_form_1.default;
 _1.default.recaptcha.editForm = ReCaptcha_form_1.default;
-_1.default.resource.editForm = Resource_form_1.default;
 _1.default.select.editForm = Select_form_1.default;
 _1.default.selectboxes.editForm = SelectBoxes_form_1.default;
 _1.default.signature.editForm = Signature_form_1.default;

package/lib/cjs/components/button/Button.js

@@ -364,9 +364,15 @@ class ButtonComponent extends Field_1.default {
             response_type: 'code',
             client_id: settings.clientId,
             redirect_uri: (settings.redirectURI && this.interpolate(settings.redirectURI)) || window.location.origin || `${window.location.protocol}//${window.location.host}`,
-            state: settings.state,
             scope: settings.scope
         };
+        if (settings.state) {
+            params.state = settings.state;
+        }
+        else if (settings.code_challenge) {
+            params.code_challenge = settings.code_challenge;
+            params.code_challenge_method = 'S256';
+        }
         /*eslint-enable camelcase */
         // Needs for the correct redirection URI for the OpenID
         const originalRedirectUri = params.redirect_uri;

package/lib/cjs/components/datagrid/DataGrid.js

@@ -127,6 +127,16 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             data: this.dataValue[index],
         }));
     }
+    isEmpty(value = this.dataValue) {
+        var _a;
+        const isEmpty = super.isEmpty(value);
+        if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {
+            return this.components.reduce((isEmpty, component) => {
+                return isEmpty && component.isEmpty();
+            }, true);
+        }
+        return isEmpty;
+    }
     /**
      * Split rows into chunks.
      * @param {Number[]} groups - array of numbers where each item is size of group
@@ -403,12 +413,14 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         });
     }
     removeRow(index) {
-        this.splice(index, { isReordered: true });
+        const makeEmpty = index === 0 && this.rows.length === 1;
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
-        this.setValue(this.dataValue, { isReordered: true });
+        this.setValue(this.dataValue, flags);
         this.redraw();
     }
     removeRowComponents(row) {
@@ -555,7 +567,8 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);
         const changed = this.hasChanged(value, this.dataValue);
         this.dataValue = value;
-        if (this.initRows || isSettingSubmission) {
+        if (this.initRows || isSettingSubmission ||
+            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {
             if (!this.createRows() && changed) {
                 this.redraw();
             }

package/lib/cjs/components/datagrid/fixtures/comp-with-allow-calculate-override.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'a',
+                        value: 'a'
+                    },
+                    {
+                        label: 'b',
+                        value: 'b'
+                    },
+                    {
+                        label: 'c',
+                        value: 'c'
+                    }
+                ]
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+        {
+            label: 'Data Grid',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        }
+    ]
+};

package/lib/cjs/components/datagrid/fixtures/comp6.js

@@ -140,7 +140,7 @@ exports.default = {
                     providerOptions: {
                         params: {
                             autocompleteOptions: {},
-                            key: 'AIzaSyBNL2e4MnmyPj9zN7SVAe428nCSLP1X144',
+                            key: '',
                         },
                     },
                     input: true,

package/lib/cjs/components/datagrid/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.modalWithRequiredFields = exports.withRowGroupsAndDefValue = exports.withLogic = exports.withDefValue = exports.withConditionalFieldsAndValidations = exports.withCollapsibleRowGroups = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.twoWithAllowCalculatedOverride = exports.withAllowCalculateOverride = exports.modalWithRequiredFields = exports.withRowGroupsAndDefValue = exports.withLogic = exports.withDefValue = exports.withConditionalFieldsAndValidations = exports.withCollapsibleRowGroups = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -32,3 +32,7 @@ const comp_with_logic_1 = __importDefault(require("./comp-with-logic"));
 exports.withLogic = comp_with_logic_1.default;
 const comp_with_collapsible_groups_1 = __importDefault(require("./comp-with-collapsible-groups"));
 exports.withCollapsibleRowGroups = comp_with_collapsible_groups_1.default;
+const comp_with_allow_calculate_override_1 = __importDefault(require("./comp-with-allow-calculate-override"));
+exports.withAllowCalculateOverride = comp_with_allow_calculate_override_1.default;
+const two_comp_with_allow_calculate_override_1 = __importDefault(require("./two-comp-with-allow-calculate-override"));
+exports.twoWithAllowCalculatedOverride = two_comp_with_allow_calculate_override_1.default;

package/lib/cjs/components/datagrid/fixtures/two-comp-with-allow-calculate-override.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'a',
+                        value: 'a'
+                    },
+                    {
+                        label: 'b',
+                        value: 'b'
+                    },
+                    {
+                        label: 'c',
+                        value: 'c'
+                    }
+                ]
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+        {
+            label: 'Data Grid',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        },
+        {
+            label: 'Data Grid 2',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid2',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        }
+    ]
+};

package/lib/cjs/components/editgrid/EditGrid.js

@@ -579,6 +579,10 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])
                 : this.editRows.reduce((result, row) => result.concat(row.components || []), []);
     }
+    destroy(all = false) {
+        this.calculatedValue = undefined;
+        super.destroy(all);
+    }
     destroyComponents(all = false, rowIndex = 0) {
         if (this.builderMode) {
             return super.destroyComponents(all);
@@ -1085,7 +1089,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
             return false;
         }
-        else if (rowsEditing && this.saveEditMode) {
+        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
             this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             return false;
         }
@@ -1113,7 +1117,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         }
     }
     changeState(changed, flags) {
-        if (changed || (flags.resetValue && this.component.modalEdit)) {
+        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {
             this.rebuild();
         }
         else {
@@ -1133,7 +1137,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent) {
+        if (this.parent && !this.options.server) {
             this.parent.checkComponentConditions();
         }
         this.dataValue = value;
@@ -1166,7 +1170,10 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        this.checkData();
+        // do not call checkData with server option, it is called when change is triggered in updateOnChange
+        if (!this.options.server) {
+            this.checkData();
+        }
         this.changeState(changed, flags);
         return changed;
     }