@formio/js 5.2.0 → 5.2.1-rc.1

package/dist/formio.utils.min.js.LICENSE.txt

@@ -20,7 +20,7 @@
 
 /*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */
 
-/*! formiojs v5.2.0 | https://unpkg.com/formiojs@5.2.0/LICENSE.txt */
+/*! formiojs v5.2.1-rc.1 | https://unpkg.com/formiojs@5.2.1-rc.1/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Embed.js

@@ -418,7 +418,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.2.0';
+Formio.version = '5.2.1-rc.1';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.2.0';
+sdk_1.Formio.version = '5.2.1-rc.1';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 sdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

package/lib/cjs/Webform.js

@@ -740,7 +740,8 @@ class Webform extends NestedDataComponent_1.default {
         this.emit(restoreDraft ? "restoreDraftError" : "saveDraftError", errDetails || errorMessage);
     }
     saveDraft() {
-        if (!this.draftEnabled) {
+        var _a;
+        if (!this.draftEnabled || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.component.reference) === false) {
             return;
         }
         if (!this.formio) {

package/lib/cjs/WebformBuilder.js

@@ -1132,15 +1132,18 @@ class WebformBuilder extends Component_1.default {
         (0, utils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
             var _a, _b;
             const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';
-            if (keys.has(paths.dataPath)) {
-                const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;
-                repeatablePaths[paths.dataPath] = {
-                    comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],
-                    onlyRadioCheckboxes,
-                };
-            }
-            else {
-                keys.set(paths.dataPath, comp);
+            const isLayout = (0, utils_1.componentInfo)(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;
+                    repeatablePaths[paths.dataPath] = {
+                        comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],
+                        onlyRadioCheckboxes,
+                    };
+                }
+                else {
+                    keys.set(paths.dataPath, comp);
+                }
             }
         }, true);
         const componentsWithRepeatablePaths = [];
@@ -1160,6 +1163,9 @@ class WebformBuilder extends Component_1.default {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
+            else {
+                comp.setCustomValidity();
+            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }
@@ -1279,7 +1285,8 @@ class WebformBuilder extends Component_1.default {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
-                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);
+                const editFormData = (_a = this.editForm.submission) === null || _a === void 0 ? void 0 : _a.data;
+                this.updateComponent((editFormData === null || editFormData === void 0 ? void 0 : editFormData.componentJson) || editFormData || component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1646,7 +1653,7 @@ class WebformBuilder extends Component_1.default {
     }
     hasEditTabs(type) {
         // If the component type does not exist then it has no edit tabs
-        if (!Components_1.default.components[type]) {
+        if (!Components_1.default.components[type === 'custom' ? 'unknown' : type]) {
             return false;
         }
         const editTabs = (0, utils_1.getComponent)(Components_1.default.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;

package/lib/cjs/Wizard.d.ts

@@ -6,7 +6,6 @@ declare class Wizard extends Webform {
     originalComponents: any[];
     page: number;
     currentPanel: any;
-    currentPanels: any[] | null;
     currentNextPage: number;
     _seenPages: number[];
     subWizards: any[];
@@ -17,7 +16,7 @@ declare class Wizard extends Webform {
     originalOptions: any;
     isLastPage(): any;
     getPages(args?: {}): any[];
-    get hasExtraPages(): boolean;
+    get hasSubWizards(): boolean;
     get localData(): any;
     get wizardKey(): string;
     set wizard(form: object);

package/lib/cjs/Wizard.js

@@ -34,7 +34,6 @@ class Wizard extends Webform_1.default {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -53,12 +52,12 @@ class Wizard extends Webform_1.default {
     }
     getPages(args = {}) {
         const { all = false } = args;
-        const pages = this.hasExtraPages ? this.components : this.pages;
+        const pages = this.hasSubWizards ? this.components : this.pages;
         const filteredPages = pages
             .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !lodash_1.default.isEmpty(this.subWizards);
     }
     get data() {
@@ -187,9 +186,9 @@ class Wizard extends Webform_1.default {
     }
     render() {
         const ctx = this.renderContext;
-        if (this.component.key) {
-            ctx.panels.map(panel => {
-                if (panel.key === this.component.key) {
+        if (this.component.id) {
+            ctx.panels.forEach(panel => {
+                if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
                 }
@@ -587,7 +586,7 @@ class Wizard extends Webform_1.default {
             this.pageFieldLogic(num);
             this.getNextPage();
             let parentNum = num;
-            if (this.hasExtraPages) {
+            if (this.hasSubWizards) {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {
@@ -873,7 +872,7 @@ class Wizard extends Webform_1.default {
         }
     }
     onChange(flags, changed, modified, changes) {
-        var _a, _b;
+        var _a;
         super.onChange(flags, changed, modified, changes);
         // The onChange loop doesn't need all components for wizards
         const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
@@ -881,23 +880,18 @@ class Wizard extends Webform_1.default {
             this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
-        let currentPanels;
-        let panels;
+        const currentPanels = this.pages;
+        // calling this.establishPages() updates/mutates this.pages to be the current pages
+        this.establishPages();
+        const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
-        if (this.hasExtraPages) {
-            currentPanels = this.pages.map(page => page.component.key);
-            this.establishPages();
-            panels = this.pages.map(page => page.component.key);
-        }
-        else {
-            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
-            panels = this.establishPages().map(panel => panel.key);
-            this.currentPanels = panels;
-            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);
+        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+            if (newIndex !== -1)
+                this.setPage(newIndex);
         }
-        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.

package/lib/cjs/components/Components.js

@@ -57,7 +57,7 @@ class Components {
             // eslint-disable-next-line new-cap
             comp = new Components.components['datagrid'](component, options, data);
         }
-        else if (component.tree) {
+        else if (component.tree || (component.input && Array.isArray(component.components))) {
             // eslint-disable-next-line new-cap
             comp = new Components.components['nesteddata'](component, options, data);
         }

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

@@ -165,10 +165,16 @@ declare class Component extends Element {
     get componentsMap(): object;
     /**
      * Returns if the parent should conditionally clear.
+     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;
     parentConditionallyHidden(): boolean;
+    /**
+     * Returns true if any of the parents default their component "hidden" property to true.
+     * @returns {boolean} - If any parent defaults the hidden property to true.
+     */
+    anyParentDefaultsHidden(): boolean;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -232,8 +238,23 @@ declare class Component extends Element {
     get visible(): boolean;
     get logicallyHidden(): any;
     _logicallyHidden: any;
-    shouldConditionallyClear(skipParent?: boolean): boolean;
-    conditionallyHidden(skipParent?: boolean): boolean;
+    /**
+     * Determines if the component should clear its value when the root form is pristine.
+     * @returns {boolean} - If the component should clear its value when the root form is pristine.
+     */
+    shouldConditionallyClearOnPristine(): boolean;
+    /**
+     * Returns if the component should clear its value when conditionally hidden.
+     * @returns {boolean} - If the component should clear its value when conditionally hidden.
+     */
+    shouldConditionallyClear(): boolean;
+    _conditionallyClear: boolean | undefined;
+    /**
+     * Returns if the component is conditionally hidden.
+     * @returns {boolean} - If the component is conditionally hidden.
+     */
+    conditionallyHidden(): boolean;
+    _conditionallyHidden: boolean | undefined;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

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

@@ -424,12 +424,14 @@ class Component extends Element_1.default {
     }
     /**
      * Returns if the parent should conditionally clear.
+     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.shouldConditionallyClear(true)) {
+            if ((currentParent.allowData && currentParent._conditionallyClear) ||
+                (!currentParent.allowData && currentParent._conditionallyHidden)) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -439,7 +441,21 @@ class Component extends Element_1.default {
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.conditionallyHidden(true)) {
+            if (currentParent._conditionallyHidden) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
+    /**
+     * Returns true if any of the parents default their component "hidden" property to true.
+     * @returns {boolean} - If any parent defaults the hidden property to true.
+     */
+    anyParentDefaultsHidden() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.component.hidden) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -654,48 +670,58 @@ class Component extends Element_1.default {
         }
         return this._logicallyHidden;
     }
-    shouldConditionallyClear(skipParent = false) {
+    /**
+     * Determines if the component should clear its value when the root form is pristine.
+     * @returns {boolean} - If the component should clear its value when the root form is pristine.
+     */
+    shouldConditionallyClearOnPristine() {
+        // If the form is pristine, we should NOT clear the value of a conditionally hidden child component
+        // of a layout component that defaults to hidden using the "hidden" component property.
+        return !this.anyParentDefaultsHidden();
+    }
+    /**
+     * Returns if the component should clear its value when conditionally hidden.
+     * @returns {boolean} - If the component should clear its value when conditionally hidden.
+     */
+    shouldConditionallyClear() {
         // Skip if this component has clearOnHide set to false.
         if (this.component.clearOnHide === false) {
-            return false;
+            this._conditionallyClear = false;
+            return this._conditionallyClear;
         }
         // If the component is logically hidden, then it is conditionally hidden and should clear.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
         // If we have a condition and it is not conditionally visible, the it should conditionally clear.
-        if (this.hasCondition() && !this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
-        }
-        // If this component has a set value, then it should ONLY clear if a parent is hidden
-        // and has the clearOnHide set to true.
-        if (this.hasSetValue) {
-            return this.parentShouldConditionallyClear();
+        if (this.hasCondition() &&
+            !this.conditionallyVisible() &&
+            (!this.rootPristine || this.shouldConditionallyClearOnPristine())) {
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
-        // Clear the value if the parent is conditionally hidden.
-        return this.parentConditionallyHidden();
+        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        return this._conditionallyClear;
     }
-    conditionallyHidden(skipParent = false) {
+    /**
+     * Returns if the component is conditionally hidden.
+     * @returns {boolean} - If the component is conditionally hidden.
+     */
+    conditionallyHidden() {
+        // If it is logically hidden, then it is conditionally hidden.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        if (!this.hasCondition() && !skipParent) {
-            return this.parentConditionallyHidden();
-        }
-        // Return if we are not conditionally visible (conditionallyHidden)
-        if (!this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
+        // If it has a condition, and is not conditionally visible, then it is conditionally hidden.
+        if (this.hasCondition() && !this.conditionallyVisible()) {
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        // Check the parent.
-        return this.parentConditionallyHidden();
+        // It is conditionally hidden if its parent is conditionally hidden.
+        this._conditionallyHidden = this.parentConditionallyHidden();
+        return this._conditionallyHidden;
     }
     get currentForm() {
         return this._currentForm;
@@ -3163,6 +3189,9 @@ class Component extends Element_1.default {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
+        if (flags.noCheck) {
+            return true;
+        }
         // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
         // as setValue. Historically, this was bypassed by a series of cached states around the data model
         // which caused its own problems. We need to ensure that premium and custom components do not fall into
@@ -3177,9 +3206,6 @@ class Component extends Element_1.default {
         if (!flags.fromBlur) {
             this.checkRefreshOn(flags.changes, flags);
         }
-        if (flags.noCheck) {
-            return true;
-        }
         this.checkComponentConditions(data, flags, row);
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);

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

@@ -672,7 +672,7 @@ class NestedComponent extends Field_1.default {
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         var _a;
         const { dirty } = flags;
-        if (this.root.hasExtraPages && this.page !== this.root.page) {
+        if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {
             instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);
@@ -821,7 +821,7 @@ class NestedComponent extends Field_1.default {
             return false;
         }
         if (component.type === 'components') {
-            if (component.tree && component.hasValue(value)) {
+            if ((component.tree || component.hasInput) && component.hasValue(value)) {
                 return component.setValue(lodash_1.default.get(value, component.key), flags);
             }
             return component.setValue(value, flags);

package/lib/cjs/components/file/File.d.ts

@@ -33,7 +33,7 @@ export default class FileComponent extends Field {
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options: any): any;
     get defaultValue(): any[];
     get hasTypes(): any;
     _fileBrowseHidden: any;

package/lib/cjs/components/file/File.js

@@ -114,7 +114,12 @@ class FileComponent extends Field_1.default {
     get emptyValue() {
         return [];
     }
-    getValueAsString(value) {
+    getValueAsString(value, options) {
+        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly) {
+            return lodash_1.default.map(value, (val, index) => {
+                return `<a href="${val.url || '#'}" target="_blank" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;
+            }).join(', ');
+        }
         if (lodash_1.default.isArray(value)) {
             return lodash_1.default.map(value, 'originalName').join(', ');
         }

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

@@ -98,8 +98,6 @@ export default class FormComponent extends Component {
      * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
-    areAllComponentsEmpty(data: any): boolean;
-    conditionallyHidden(): boolean;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard

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

@@ -101,6 +101,9 @@ class FormComponent extends Component_1.default {
         }
         return this.createSubForm();
     }
+    shouldConditionallyClearOnPristine() {
+        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
+    }
     get dataReady() {
         return this.subFormReady || Promise.resolve();
     }
@@ -292,11 +295,13 @@ class FormComponent extends Component_1.default {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                        this.setDefaultValue();
-                    }
-                    else {
-                        this.restoreValue();
+                    if (!this.shouldConditionallyClear()) {
+                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                            this.setDefaultValue();
+                        }
+                        else {
+                            this.restoreValue();
+                        }
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
@@ -415,7 +420,7 @@ class FormComponent extends Component_1.default {
                 this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;
                 this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;
                 this.subForm.on('change', () => {
-                    if (this.subForm) {
+                    if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -680,20 +685,7 @@ class FormComponent extends Component_1.default {
         this.subForm.setValue(submission, flags);
     }
     isEmpty(value = this.dataValue) {
-        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));
-    }
-    areAllComponentsEmpty(data) {
-        let res = true;
-        if (this.subForm) {
-            this.subForm.everyComponent((comp) => {
-                const componentValue = lodash_1.default.get(data, comp.key);
-                res &= comp.isEmpty(componentValue);
-            });
-        }
-        else {
-            res = false;
-        }
-        return res;
+        return value === null || lodash_1.default.isEqual(value, this.emptyValue);
     }
     getValue() {
         if (this.subForm) {

package/lib/cjs/components/select/Select.d.ts

@@ -126,7 +126,6 @@ export default class SelectComponent extends ListComponent {
     get isLoadingAvailable(): any;
     onScroll(): void;
     attachRefreshOnBlur(): void;
-    addPlaceholderItem(placeholderValue: any): void;
     update(): void;
     addCurrentChoices(values: any, items: any, keyValue: any): any;
     getValueAsString(data: any, options: any): any;

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

@@ -768,10 +768,10 @@ class SelectComponent extends ListComponent_1.default {
             distance: 1000,
         };
         return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {
-                containerOuter: 'choices form-group formio-choices',
-                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')
+                containerOuter: ['choices', 'form-group', 'formio-choices'],
+                containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
             }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch
-                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false }, customOptions);
+                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);
     }
     /* eslint-disable max-statements */
     attach(element) {
@@ -903,12 +903,6 @@ class SelectComponent extends ListComponent_1.default {
                 this.positionDropdown();
             });
         }
-        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
-            this.addPlaceholderItem(choicesOptions.placeholderValue);
-            this.addEventListener(input, 'removeItem', () => {
-                this.addPlaceholderItem(choicesOptions.placeholderValue);
-            });
-        }
         // Add value options.
         this.addValueOptions();
         this.setChoicesValue(this.dataValue);
@@ -996,20 +990,6 @@ class SelectComponent extends ListComponent_1.default {
             });
         }
     }
-    addPlaceholderItem(placeholderValue) {
-        const items = this.choices._store.activeItems;
-        if (!items.length) {
-            this.choices._addItem({
-                value: '',
-                label: placeholderValue,
-                choiceId: 0,
-                groupId: -1,
-                customProperties: null,
-                placeholder: true,
-                keyCode: null
-            });
-        }
-    }
     /* eslint-enable max-statements */
     update() {
         if (this.component.dataSrc === 'custom') {

package/lib/cjs/components/tags/Tags.d.ts

@@ -24,4 +24,4 @@ export default class TagsComponent extends Input {
     getValueAsString(value: any): any;
 }
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';

package/lib/cjs/components/tags/Tags.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils");
 const Input_1 = __importDefault(require("../_classes/input/Input"));
-const choices_js_1 = __importDefault(require("@formio/choices.js"));
+const choices_js_1 = __importDefault(require("choices.js"));
 class TagsComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({
@@ -129,7 +129,7 @@ class TagsComponent extends Input_1.default {
         const changed = super.setValue(value, flags);
         if (this.choices) {
             let dataValue = this.dataValue;
-            this.choices.removeActiveItems();
+            this.choices.clearStore();
             if (dataValue) {
                 if (typeof dataValue === 'string') {
                     dataValue = dataValue.split(this.delimiter).filter(result => result);

package/lib/cjs/formio.form.js

@@ -73,6 +73,7 @@ function registerModule(mod, defaultFn = null, options = {}) {
             case 'templates':
                 for (const framework of Object.keys(mod.templates)) {
                     Formio_1.Formio.Templates.extendTemplate(framework, mod.templates[framework]);
+                    Formio_1.Formio.Templates.defaultTemplates = lodash_1.default.defaults(mod.templates[framework], Formio_1.Formio.Templates.defaultTemplates);
                 }
                 if (mod.templates[current]) {
                     Formio_1.Formio.Templates.current = mod.templates[current];