@formio/js 5.0.0-rc.37 → 5.0.0-rc.38

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.observeOverload = 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.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-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 = void 0;
+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.escapeHTML = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = 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;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -447,6 +447,22 @@ function unescapeHTML(str) {
     return doc.documentElement.textContent;
 }
 exports.unescapeHTML = unescapeHTML;
+/**
+ * Escape HTML characters like <, >, & and etc.
+ * @param str
+ * @returns {string}
+ */
+function escapeHTML(html) {
+    if (html) {
+        return html.replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+    return '';
+}
+exports.escapeHTML = escapeHTML;
 /**
  * Make HTML element from string
  * @param str
@@ -1509,3 +1525,25 @@ const interpolateErrors = (component, errors, interpolateFn) => {
     });
 };
 exports.interpolateErrors = interpolateErrors;
+function getItemTemplateKeys(template) {
+    const templateKeys = [];
+    if (!template) {
+        return templateKeys;
+    }
+    const keys = template.match(/({{\s*(.*?)\s*}})/g);
+    if (keys) {
+        keys.forEach((key) => {
+            const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
+            if (propKey && propKey.length > 1) {
+                templateKeys.push(propKey[1]);
+            }
+        });
+    }
+    return templateKeys;
+}
+exports.getItemTemplateKeys = getItemTemplateKeys;
+function isSelectResourceWithObjectValue(comp = {}) {
+    const { reference, dataSrc, valueProperty } = comp;
+    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));
+}
+exports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;

package/lib/mjs/Element.js

@@ -179,7 +179,7 @@ export default class Element {
      * @param persistent
      *   If this listener should persist beyond "destroy" commands.
      */
-    addEventListener(obj, type, func, persistent) {
+    addEventListener(obj, type, func, persistent, capture) {
         if (!obj) {
             return;
         }
@@ -187,7 +187,7 @@ export default class Element {
             this.eventHandlers.push({ id: this.id, obj, type, func });
         }
         if ('addEventListener' in obj) {
-            obj.addEventListener(type, func, false);
+            obj.addEventListener(type, func, !!capture);
         }
         else if ('attachEvent' in obj) {
             obj.attachEvent(`on${type}`, func);

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

@@ -3,7 +3,7 @@ import { conformToMask } from '@formio/vanilla-text-mask';
 import tippy from 'tippy.js';
 import _ from 'lodash';
 import isMobile from 'ismobilejs';
-import { processOne, processOneSync, validateProcess, validateProcessSync } from '@formio/core/process';
+import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
 import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone } from '../../../utils/utils';
@@ -819,7 +819,13 @@ export default class Component extends Element {
     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 = this.component;
+        data.component = {
+            ...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.self = this;
         data.options = this.options;
         data.readOnly = this.options.readOnly;
@@ -1030,12 +1036,12 @@ export default class Component extends Element {
                 const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
                     .replace(/(?:\r\n|\r|\n)/g, '<br />');
                 this.tooltips[index] = tippy(tooltip, {
-                    allowHTML: true,
+                    allowHTML: false,
                     trigger: 'mouseenter click focus',
                     placement: 'right',
                     zIndex: 10000,
                     interactive: true,
-                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+                    content: this.t(tooltipText, { _userInput: true }),
                 });
             }
         });
@@ -2574,7 +2580,7 @@ export default class Component extends Element {
             scope: validationScope,
             instance: this,
             processors: [
-                validateProcessSync
+                validateProcessInfo
             ]
         });
         const errors = validationScope.errors;
@@ -2655,7 +2661,7 @@ export default class Component extends Element {
             instance: this,
             scope: { errors: [] },
             processors: [
-                async ? validateProcess : validateProcessSync
+                validateProcessInfo
             ]
         };
         if (async) {
@@ -2684,7 +2690,12 @@ export default class Component extends Element {
             return this.validateComponent(data, row, flags).then((errors) => {
                 allErrors.push(...errors);
                 if (this.parent && this.parent.childErrors) {
-                    this.parent.childErrors.push(...errors);
+                    if (errors.length) {
+                        this.parent.childErrors.push(...errors);
+                    }
+                    else {
+                        _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                    }
                 }
                 this.showValidationErrors(errors, data, row, flags);
                 return errors.length === 0;
@@ -2695,7 +2706,12 @@ export default class Component extends Element {
             this.showValidationErrors(errors, data, row, flags);
             allErrors.push(...errors);
             if (this.parent && this.parent.childErrors) {
-                this.parent.childErrors.push(...errors);
+                if (errors.length) {
+                    this.parent.childErrors.push(...errors);
+                }
+                else {
+                    _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                }
             }
             return errors.length === 0;
         }

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

@@ -4,8 +4,8 @@ export default {
     components: [
         {
             label: 'Text Field',
-            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
-            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
+            description: "<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/mjs/components/_classes/list/ListComponent.js

@@ -1,6 +1,7 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
+import { getItemTemplateKeys } from '../../../utils/utils';
 export default class ListComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -43,18 +44,10 @@ export default class ListComponent extends Field {
         return true;
     }
     getTemplateKeys() {
-        this.templateKeys = [];
-        if (this.options.readOnly && this.component.template) {
-            const keys = this.component.template.match(/({{\s*(.*?)\s*}})/g);
-            if (keys) {
-                keys.forEach((key) => {
-                    const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
-                    if (propKey && propKey.length > 1) {
-                        this.templateKeys.push(propKey[1]);
-                    }
-                });
-            }
-        }
+        const template = this.component.template;
+        this.templateKeys = this.options.readOnly && template
+            ? getItemTemplateKeys(template)
+            : [];
     }
     get requestHeaders() {
         // Create the headers object.

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

@@ -582,6 +582,16 @@ export default class NestedComponent extends Field {
         components = components || this.component.components;
         data = data || this.rootValue;
         const { async, dirty, process } = flags;
+        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);
+        const checkModalProcessorProcess = ({ instance, component, components }) => {
+            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.
+            if (instance &&
+                instance.parent &&
+                (component === components[components.length - 1]) &&
+                instance.parent.componentModal) {
+                instance.parent.checkModal(instance.parent.childErrors, dirty);
+            }
+        };
         const processorContext = {
             process: process || 'unknown',
             components,
@@ -589,15 +599,13 @@ export default class NestedComponent extends Field {
             data: data,
             scope: { errors: [] },
             processors: [
-                (context) => this.validationProcessor(context, flags),
-                ({ instance, component, components }) => {
-                    // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.
-                    if (instance &&
-                        instance.parent &&
-                        (component === components[components.length - 1]) &&
-                        instance.parent.componentModal) {
-                        instance.parent.checkModal(instance.parent.childErrors, dirty);
-                    }
+                {
+                    process: validationProcessorProcess,
+                    processSync: validationProcessorProcess
+                },
+                {
+                    process: checkModalProcessorProcess,
+                    processSync: checkModalProcessorProcess
                 }
             ]
         };

package/lib/mjs/components/columns/editForm/Columns.edit.display.js

@@ -56,7 +56,7 @@ export default [
         key: 'columns',
         label: 'Column Properties',
         addAnother: 'Add Column',
-        tooltip: 'The width, offset, push, and pull settings for each column.',
+        tooltip: 'The size and width settings for each column. One row is equal to 12. (e.g., a row with two columns spanning the entire page should be 6 and 6)',
         reorder: true,
         components: [
             {

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

@@ -467,7 +467,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 ].forEach(({ className, event, action, }) => {
                     const elements = row.getElementsByClassName(className);
                     Array.prototype.forEach.call(elements, (element) => {
-                        if (this.options.readOnly && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
+                        if (this.options.pdf && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
                             element.style.display = 'none';
                         }
                         else {
@@ -599,6 +599,9 @@ export default class EditGridComponent extends NestedArrayComponent {
         const dataObj = {};
         const rowIndex = this.editRows.length;
         const editRow = this.createRow(dataObj, rowIndex);
+        if (editRow.state === EditRowState.New) {
+            this.emptyRow = fastCloneDeep(editRow.data);
+        }
         if (this.inlineEditMode) {
             this.triggerChange();
         }
@@ -669,7 +672,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     showDialog(rowIndex) {
         const editRow = this.editRows[rowIndex];
-        if (_.isEqual(editRow.backup, editRow.data)) {
+        if (editRow.state === EditRowState.New ? _.isEqual(this.emptyRow, editRow.data) : _.isEqual(editRow.backup, editRow.data)) {
             return Promise.resolve();
         }
         const wrapper = this.ce('div', { ref: 'confirmationDialog' });
@@ -969,6 +972,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             const editGridValue = _.get(rootValue, this.path, []);
             editGridValue[editRow.rowIndex] = editRow.data;
             _.set(rootValue, this.path, editGridValue);
+            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });
             editRow.errors = processSync({
                 components: fastCloneDeep(this.component.components).map((component) => {
                     component.parentPath = `${this.path}[${editRow.rowIndex}]`;
@@ -980,7 +984,10 @@ export default class EditGridComponent extends NestedArrayComponent {
                 instances: this.componentsMap,
                 scope: { errors: [] },
                 processors: [
-                    (context) => this.validationProcessor(context, { dirty, silentCheck })
+                    {
+                        process: validationProcessorProcess,
+                        processSync: validationProcessorProcess
+                    }
                 ]
             }).errors;
         }
@@ -1070,7 +1077,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty);
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
         if (allRowErrors.length && this.root?.submitted && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);

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

@@ -600,7 +600,9 @@ export default class FormComponent extends Component {
             const formId = submission.form || this.formObj.form || this.component.form;
             const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
             this.subForm.setUrl(submissionUrl, this.options);
-            this.subForm.loadSubmission();
+            this.subForm.loadSubmission().catch((err) => {
+                console.error(`Unable to load subform submission ${submission._id}:`, err);
+            });
         }
         else {
             this.subForm.setValue(submission, flags);

package/lib/mjs/components/html/HTML.js

@@ -38,13 +38,13 @@ export default class HTMLComponent extends Component {
             return ` ${this.component.content} `;
         }
         const submission = _.get(this.root, 'submission', {});
-        const content = this.component.content ? this.interpolate(this.component.content, {
+        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {
             metadata: submission.metadata || {},
             submission: submission,
             data: this.rootValue,
             row: this.data
         }) : '';
-        return this.sanitize(content, this.shouldSanitizeValue);
+        return content;
     }
     get singleTags() {
         return ['br', 'img', 'hr'];

package/lib/mjs/components/html/fixtures/comp3.js

@@ -0,0 +1,29 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'HTML',
+            attrs: [
+                {
+                    attr: '',
+                    value: '',
+                },
+            ],
+            content: '<img src=1 onerror=alert("htmlContent")>',
+            refreshOnChange: false,
+            key: 'html',
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/mjs/components/html/fixtures/index.js

@@ -1,3 +1,4 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
-export { comp1, comp2 };
+import comp3 from './comp3';
+export { comp1, comp2, comp3 };

package/lib/mjs/components/radio/Radio.js

@@ -349,7 +349,8 @@ export default class RadioComponent extends ListComponent {
         if (value === this.emptyValue) {
             return value;
         }
-        if (!isNaN(parseFloat(value)) && isFinite(value)) {
+        const isEquivalent = _.toString(value) === Number(value).toString();
+        if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
             value = +value;
         }
         if (value === 'true') {

package/lib/mjs/components/radio/fixtures/comp10.js

@@ -0,0 +1,21 @@
+export default {
+    'label': 'Radio',
+    'optionsLabelPosition': 'right',
+    'inline': false,
+    'tableView': false,
+    'values': [
+        {
+            'label': '01',
+            'value': '01',
+            'shortcut': ''
+        },
+        {
+            'label': '1',
+            'value': '1',
+            'shortcut': ''
+        }
+    ],
+    'key': 'radio',
+    'type': 'radio',
+    'input': true
+};

package/lib/mjs/components/radio/fixtures/index.js

@@ -7,4 +7,5 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9 };
+import comp10 from './comp10';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -52,6 +52,9 @@ export default class ReCaptchaComponent extends Component {
     createLabel() {
         return;
     }
+    get skipInEmail() {
+        return true;
+    }
     verify(actionName) {
         const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {

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 } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -61,7 +61,19 @@ export default class SelectComponent extends ListComponent {
         return {
             ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
-                return { ...classComp, type: 'select' };
+                const valueComp = { ...classComp, type: 'select' };
+                if (isSelectResourceWithObjectValue(classComp)) {
+                    valueComp.reference = false;
+                    valueComp.onSetItems = `
+            var templateKeys = utils.getItemTemplateKeys(component.template) || [];
+            items = _.map(items || [], i => {
+              var item = {};
+              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));
+              return item;
+            })
+          `;
+                }
+                return valueComp;
             }
         };
     }
@@ -120,6 +132,7 @@ export default class SelectComponent extends ListComponent {
         this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
+        this.shouldPositionDropdown = this.hasDataGridAncestor();
         if (this.isHtmlRenderMode()) {
             this.activate();
         }
@@ -851,6 +864,11 @@ export default class SelectComponent extends ListComponent {
                 });
             }
         }
+        if (window && this.choices && this.shouldPositionDropdown) {
+            this.addEventListener(window.document, 'scroll', () => {
+                this.positionDropdown(true);
+            }, false, true);
+        }
         this.focusableElement.setAttribute('tabIndex', tabIndex);
         // If a search field is provided, then add an event listener to update items on search.
         if (this.component.searchField) {
@@ -880,7 +898,10 @@ export default class SelectComponent extends ListComponent {
             const updateComponent = (evt) => {
                 this.triggerUpdate(evt.detail.value);
             };
-            this.addEventListener(input, 'search', _.debounce(updateComponent, debounceTimeout));
+            this.addEventListener(input, 'search', _.debounce((e) => {
+                updateComponent(e);
+                this.positionDropdown();
+            }, debounceTimeout));
             this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());
             this.addEventListener(input, 'hideDropdown', () => {
                 if (this.choices && this.choices.input && this.choices.input.element) {
@@ -889,7 +910,15 @@ export default class SelectComponent extends ListComponent {
                 this.updateItems(null, true);
             });
         }
-        this.addEventListener(input, 'showDropdown', () => this.update());
+        this.addEventListener(input, 'showDropdown', () => {
+            this.update();
+            this.positionDropdown();
+        });
+        if (this.shouldPositionDropdown) {
+            this.addEventListener(input, 'highlightChoice', () => {
+                this.positionDropdown();
+            });
+        }
         if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
             this.addPlaceholderItem(choicesOptions.placeholderValue);
             this.addEventListener(input, 'removeItem', () => {
@@ -926,6 +955,44 @@ export default class SelectComponent extends ListComponent {
         this.triggerUpdate();
         return superAttach;
     }
+    setDropdownPosition() {
+        const dropdown = this.choices?.dropdown?.element;
+        const container = this.choices?.containerOuter?.element;
+        if (!dropdown || !container) {
+            return;
+        }
+        const containerPosition = container.getBoundingClientRect();
+        const isFlipped = container.classList.contains('is-flipped');
+        _.assign(dropdown.style, {
+            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,
+            left: `${containerPosition.left}px`,
+            width: `${containerPosition.width}px`,
+            position: 'fixed',
+            bottom: 'unset',
+            right: 'unset',
+        });
+    }
+    hasDataGridAncestor(comp) {
+        comp = comp || this;
+        if (comp.inDataGrid || comp.type === 'datagrid') {
+            return true;
+        }
+        else if (comp.parent) {
+            return this.hasDataGridAncestor(comp.parent);
+        }
+        else {
+            return false;
+        }
+    }
+    positionDropdown(scroll) {
+        if (!this.shouldPositionDropdown || !this.choices || (!this.choices.dropdown?.isActive && scroll)) {
+            return;
+        }
+        this.setDropdownPosition();
+        this.itemsLoaded.then(() => {
+            this.setDropdownPosition();
+        });
+    }
     get isLoadingAvailable() {
         return !this.isScrollLoading && this.additionalResourcesAvailable;
     }
@@ -1043,10 +1110,10 @@ export default class SelectComponent extends ListComponent {
         }
         return added;
     }
-    getValueAsString(data) {
+    getValueAsString(data, options) {
         return (this.component.multiple && Array.isArray(data))
-            ? data.map(this.asString.bind(this)).join(', ')
-            : this.asString(data);
+            ? data.map((v) => this.asString(v, options)).join(', ')
+            : this.asString(data, options);
     }
     getValue() {
         // If the widget isn't active.
@@ -1398,7 +1465,7 @@ export default class SelectComponent extends ListComponent {
         }
         return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));
     }
-    asString(value) {
+    asString(value, options = {}) {
         value = value ?? this.getValue();
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
@@ -1448,9 +1515,15 @@ export default class SelectComponent extends ListComponent {
         if (_.isString(value)) {
             return value;
         }
+        const getTemplateValue = (v) => {
+            const itemTemplate = this.itemTemplate(v);
+            return options.csv && itemTemplate
+                ? unescapeHTML(itemTemplate)
+                : itemTemplate;
+        };
         if (Array.isArray(value)) {
             const items = [];
-            value.forEach(item => items.push(this.itemTemplate(item)));
+            value.forEach(item => items.push(getTemplateValue(item)));
             if (this.component.dataSrc === 'resource' && items.length > 0) {
                 return items.join(', ');
             }
@@ -1465,7 +1538,7 @@ export default class SelectComponent extends ListComponent {
             return JSON.stringify(value);
         }
         return !_.isNil(value)
-            ? this.itemTemplate(value)
+            ? getTemplateValue(value)
             : '-';
     }
     detach() {

package/lib/mjs/components/survey/Survey.js

@@ -148,6 +148,16 @@ export default class SurveyComponent extends Field {
             result += '</tbody></table>';
             return result;
         }
+        if (_.isPlainObject(value)) {
+            const { values = [], questions = [] } = this.component;
+            return _.isEmpty(value)
+                ? ''
+                : _.map(value, (v, q) => {
+                    const valueLabel = _.get(_.find(values, val => _.isEqual(val.value, v)), 'label', v);
+                    const questionLabel = _.get(_.find(questions, quest => _.isEqual(quest.value, q)), 'label', q);
+                    return `${questionLabel}: ${valueLabel}`;
+                }).join('; ');
+        }
         return super.getValueAsString(value, options);
     }
 }