@formio/js 5.0.0-dev.5633.3b83d8c → 5.0.0-dev.5633.3e0990b

package/lib/cjs/Webform.d.ts

@@ -357,11 +357,12 @@ declare class Webform extends NestedDataComponent {
      */
     get submission(): Object;
     /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
-    onSetSubmission(submission: any, flags?: {}): void;
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
+    onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param submission

package/lib/cjs/Webform.js

@@ -717,10 +717,11 @@ class Webform extends NestedDataComponent_1.default {
         this.setSubmission(submission);
     }
     /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
         this.triggerChange(flags);
@@ -795,7 +796,8 @@ class Webform extends NestedDataComponent_1.default {
         formio.loadSubmissions({
             params: {
                 state: 'draft',
-                owner: userId
+                owner: userId,
+                sort: '-created'
             }
         }).then(submissions => {
             if (submissions.length > 0 && !this.options.skipDraftRestore) {

package/lib/cjs/WebformBuilder.js

@@ -986,8 +986,14 @@ class WebformBuilder extends Component_1.default {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            if (component.input && componentInstance && componentInstance.parent) {
-                lodash_1.default.unset(componentInstance._data, componentInstance.key);
+            if (component.input && componentInstance && parent.formioComponent) {
+                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);
+                if (Array.isArray(parentDefaultValue)) {
+                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));
+                }
+                else if (typeof parentDefaultValue === 'object') {
+                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);
+                }
             }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -327,12 +327,23 @@ declare class Component extends Element {
      */
     loadRefs(element: HTMLElement, refs: object, referenceAttributeName?: string | undefined): void;
     setOpenModalElement(template: any): void;
-    renderModalPreview(ctx: any): any;
-    getModalPreviewTemplate(): any;
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @return {string} - The modal preview markup
+     */
+    renderModalPreview(ctx: object | null | undefined): string;
+    getModalPreviewTemplate(): string;
     build(element: any): Promise<void>;
     get hasModalSaveButton(): boolean;
     render(children?: string, topLevel?: boolean): any;
-    createTooltip(tooltipEl: any, settings?: {}): import("tippy.js").Instance<import("tippy.js").Props>[];
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @return {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     attachTooltips(toolTipsRefs: any): void;
     createComponentModal(element: any, modalShouldBeOpened: any, currentValue: any): ComponentModal;
     attach(element: any): Promise<void>;

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

@@ -1029,6 +1029,11 @@ class Component extends Element_1.default {
     setOpenModalElement(template) {
         this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
     }
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @return {string} - The modal preview markup
+     */
     renderModalPreview(ctx) {
         return this.renderTemplate('modalPreview', ctx || {});
     }
@@ -1077,6 +1082,12 @@ class Component extends Element_1.default {
             }, topLevel);
         }
     }
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @return {import('tippy.js').Tippy} - tippy.js instance
+     */
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
         const tooltipDataTitle = tooltipEl.getAttribute('data-title');
@@ -1849,9 +1860,6 @@ class Component extends Element_1.default {
         messages = lodash_1.default.uniqBy(messages, message => message.message);
         if (this.refs.messageContainer) {
             this.setContent(this.refs.messageContainer, messages.map((message) => {
-                if (message.message && typeof message.message === 'string') {
-                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-                }
                 return this.renderTemplate('message', Object.assign({}, message));
             }).join(''));
         }
@@ -2561,7 +2569,7 @@ class Component extends Element_1.default {
         }
         this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified) {
+            if (!flags.noPristineChangeOnModified && this.root.initialized) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;

package/lib/cjs/components/form/Form.d.ts

@@ -79,7 +79,13 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
-    onSetSubFormValue(submission: any, flags: any): void;
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
+    onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**

package/lib/cjs/components/form/Form.js

@@ -431,7 +431,7 @@ class FormComponent extends Component_1.default {
      * Load the subform.
      */
     loadSubForm(fromAttach) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
@@ -445,7 +445,7 @@ class FormComponent extends Component_1.default {
         }
         else if (this.formSrc) {
             this.subFormLoading = true;
-            const options = ((_b = this.root.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_c = this.root.formio) === null || _c === void 0 ? void 0 : _c.projectUrl)
+            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)
                 ? {
                     base: this.root.formio.base,
                     project: this.root.formio.projectUrl,
@@ -625,15 +625,16 @@ class FormComponent extends Component_1.default {
         return changed;
     }
     setSubFormValue(submission, flags) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const shouldLoadSubmissionById = submission
             && submission._id
             && this.subForm.formio
             && lodash_1.default.isEmpty(submission.data);
-        if (shouldLoadSubmissionById) {
+        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');
+        if (shouldLoadSubmissionById || shouldLoadDraftById) {
             const formId = submission.form || this.formObj.form || this.component.form;
-            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
-            const options = ((_a = this.root.formio) === null || _a === void 0 ? void 0 : _a.base) && ((_b = this.root.formio) === null || _b === void 0 ? void 0 : _b.projectUrl)
+            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;
+            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)
                 ? {
                     base: this.root.formio.base,
                     project: this.root.formio.projectUrl,
@@ -648,6 +649,12 @@ class FormComponent extends Component_1.default {
             this.onSetSubFormValue(submission, flags);
         }
     }
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);
     }

package/lib/cjs/components/select/Select.js

@@ -1526,7 +1526,7 @@ class SelectComponent extends ListComponent_1.default {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? (0, utils_1.unescapeHTML)(itemTemplate)
+                ? (0, utils_1.removeHTML)(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {

package/lib/cjs/utils/utils.d.ts

@@ -107,6 +107,12 @@ export function checkCondition(component: any, row: any, data: any, form: any, i
  */
 export function checkTrigger(component: any, trigger: any, row: any, data: any, form: any, instance: any): mixed;
 export function setActionProperty(component: any, action: any, result: any, row: any, data: any, instance: any): any;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str: string): string;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str

package/lib/cjs/utils/utils.js

@@ -30,8 +30,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = void 0;
+exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
+exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -448,6 +448,16 @@ function setActionProperty(component, action, result, row, data, instance) {
     return component;
 }
 exports.setActionProperty = setActionProperty;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+function removeHTML(str) {
+    const doc = new window.DOMParser().parseFromString(str, 'text/html');
+    return (doc.body.textContent || '').trim();
+}
+exports.removeHTML = removeHTML;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str
@@ -457,8 +467,9 @@ function unescapeHTML(str) {
     if (typeof window === 'undefined' || !('DOMParser' in window)) {
         return str;
     }
-    const doc = new window.DOMParser().parseFromString(str, 'text/html');
-    return doc.documentElement.textContent;
+    const elem = document.createElement('textarea');
+    elem.innerHTML = str;
+    return elem.value;
 }
 exports.unescapeHTML = unescapeHTML;
 /**

package/lib/mjs/Webform.d.ts

@@ -357,11 +357,12 @@ declare class Webform extends NestedDataComponent {
      */
     get submission(): Object;
     /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
-    onSetSubmission(submission: any, flags?: {}): void;
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
+    onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param submission

package/lib/mjs/Webform.js

@@ -715,10 +715,11 @@ export default class Webform extends NestedDataComponent {
         this.setSubmission(submission);
     }
     /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
         this.triggerChange(flags);
@@ -799,7 +800,8 @@ export default class Webform extends NestedDataComponent {
         formio.loadSubmissions({
             params: {
                 state: 'draft',
-                owner: userId
+                owner: userId,
+                sort: '-created'
             }
         }).then(submissions => {
             if (submissions.length > 0 && !this.options.skipDraftRestore) {

package/lib/mjs/WebformBuilder.js

@@ -970,8 +970,14 @@ export default class WebformBuilder extends Component {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            if (component.input && componentInstance && componentInstance.parent) {
-                _.unset(componentInstance._data, componentInstance.key);
+            if (component.input && componentInstance && parent.formioComponent) {
+                const parentDefaultValue = _.get(parent.formioComponent, 'component.defaultValue', null);
+                if (Array.isArray(parentDefaultValue)) {
+                    parentDefaultValue.forEach(v => _.unset(v, componentInstance.key));
+                }
+                else if (typeof parentDefaultValue === 'object') {
+                    _.unset(parentDefaultValue, componentInstance.key);
+                }
             }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -327,12 +327,23 @@ declare class Component extends Element {
      */
     loadRefs(element: HTMLElement, refs: object, referenceAttributeName?: string | undefined): void;
     setOpenModalElement(template: any): void;
-    renderModalPreview(ctx: any): any;
-    getModalPreviewTemplate(): any;
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @return {string} - The modal preview markup
+     */
+    renderModalPreview(ctx: object | null | undefined): string;
+    getModalPreviewTemplate(): string;
     build(element: any): Promise<void>;
     get hasModalSaveButton(): boolean;
     render(children?: string, topLevel?: boolean): any;
-    createTooltip(tooltipEl: any, settings?: {}): import("tippy.js").Instance<import("tippy.js").Props>[];
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @return {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     attachTooltips(toolTipsRefs: any): void;
     createComponentModal(element: any, modalShouldBeOpened: any, currentValue: any): ComponentModal;
     attach(element: any): Promise<void>;

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

@@ -996,6 +996,11 @@ export default class Component extends Element {
     setOpenModalElement(template) {
         this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
     }
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @return {string} - The modal preview markup
+     */
     renderModalPreview(ctx) {
         return this.renderTemplate('modalPreview', ctx || {});
     }
@@ -1043,6 +1048,12 @@ export default class Component extends Element {
             }, topLevel);
         }
     }
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @return {import('tippy.js').Tippy} - tippy.js instance
+     */
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
         const tooltipDataTitle = tooltipEl.getAttribute('data-title');
@@ -1821,9 +1832,6 @@ export default class Component extends Element {
         messages = _.uniqBy(messages, message => message.message);
         if (this.refs.messageContainer) {
             this.setContent(this.refs.messageContainer, messages.map((message) => {
-                if (message.message && typeof message.message === 'string') {
-                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-                }
                 return this.renderTemplate('message', { ...message });
             }).join(''));
         }
@@ -2537,7 +2545,7 @@ export default class Component extends Element {
         }
         this.calculatedValue = fastCloneDeep(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified) {
+            if (!flags.noPristineChangeOnModified && this.root.initialized) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;

package/lib/mjs/components/form/Form.d.ts

@@ -79,7 +79,13 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
-    onSetSubFormValue(submission: any, flags: any): void;
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
+    onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**

package/lib/mjs/components/form/Form.js

@@ -440,7 +440,7 @@ export default class FormComponent extends Component {
         }
         else if (this.formSrc) {
             this.subFormLoading = true;
-            const options = this.root.formio?.base && this.root.formio?.projectUrl
+            const options = this.root?.formio?.base && this.root?.formio?.projectUrl
                 ? {
                     base: this.root.formio.base,
                     project: this.root.formio.projectUrl,
@@ -620,10 +620,11 @@ export default class FormComponent extends Component {
             && submission._id
             && this.subForm.formio
             && _.isEmpty(submission.data);
-        if (shouldLoadSubmissionById) {
+        const shouldLoadDraftById = this.options.saveDraft && _.isEmpty(submission.data) && _.get(this.subForm, 'submission._id');
+        if (shouldLoadSubmissionById || shouldLoadDraftById) {
             const formId = submission.form || this.formObj.form || this.component.form;
-            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
-            const options = this.root.formio?.base && this.root.formio?.projectUrl
+            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;
+            const options = this.root?.formio?.base && this.root?.formio?.projectUrl
                 ? {
                     base: this.root.formio.base,
                     project: this.root.formio.projectUrl,
@@ -638,6 +639,12 @@ export default class FormComponent extends Component {
             this.onSetSubFormValue(submission, flags);
         }
     }
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);
     }

package/lib/mjs/components/select/Select.js

@@ -3,7 +3,7 @@ import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -1551,7 +1551,7 @@ export default class SelectComponent extends ListComponent {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? unescapeHTML(itemTemplate)
+                ? removeHTML(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {

package/lib/mjs/utils/utils.d.ts

@@ -107,6 +107,12 @@ export function checkCondition(component: any, row: any, data: any, form: any, i
  */
 export function checkTrigger(component: any, trigger: any, row: any, data: any, form: any, instance: any): mixed;
 export function setActionProperty(component: any, action: any, result: any, row: any, data: any, instance: any): any;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str: string): string;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str

package/lib/mjs/utils/utils.js

@@ -395,6 +395,15 @@ export function setActionProperty(component, action, result, row, data, instance
     }
     return component;
 }
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str) {
+    const doc = new window.DOMParser().parseFromString(str, 'text/html');
+    return (doc.body.textContent || '').trim();
+}
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str
@@ -404,8 +413,9 @@ export function unescapeHTML(str) {
     if (typeof window === 'undefined' || !('DOMParser' in window)) {
         return str;
     }
-    const doc = new window.DOMParser().parseFromString(str, 'text/html');
-    return doc.documentElement.textContent;
+    const elem = document.createElement('textarea');
+    elem.innerHTML = str;
+    return elem.value;
 }
 /**
  * Make HTML element from string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5633.3b83d8c",
+  "version": "5.0.0-dev.5633.3e0990b",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {