@formio/js 5.1.0-dev.6030.abc8cfc → 5.1.0-dev.6035.9508dc1

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

@@ -18,7 +18,7 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.2.3 | (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.3/LICENSE */
+/*! @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.1.0-dev.2 | https://unpkg.com/formiojs@5.1.0-dev.2/LICENSE.txt */
 

package/lib/cjs/Form.d.ts

@@ -48,7 +48,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.
@@ -117,9 +117,7 @@ export default class Form extends Element {
         /**
          * - The translation file for this rendering.
          */
-        i18n?: {
-            [key: string]: string;
-        } | undefined;
+        i18n?: Record<string, Record<string, string>> | undefined;
         /**
          * - Custom logic for creation of elements.
          */

package/lib/cjs/WizardBuilder.js

@@ -261,10 +261,23 @@ class WizardBuilder extends WebformBuilder_1.default {
         if (component instanceof WizardBuilder) {
             return;
         }
+        if (!window.sessionStorage) {
+            return console.warn(this.t('sessionStorageSupportError'));
+        }
+        // If pasting after the Wizard's page, check if a full Wizard page was copied and pass it to addPage method
         if (this._form.components.find(comp => lodash_1.default.isEqual(component.component, comp))) {
-            this.addPage(component);
+            const data = window.sessionStorage.getItem('formio.clipboard');
+            if (data) {
+                const schema = JSON.parse(data);
+                // If the copied component is not a Wizard's page, do nothing since we can't paste outside the panel in Wizard
+                if (schema.type !== 'panel') {
+                    return;
+                }
+                this.addPage(schema);
+            }
         }
         else {
+            // If we are not trying to paster after the current Wizard's page, just pass it to the WebformBuilder
             return super.pasteComponent(component);
         }
     }

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

@@ -13,7 +13,7 @@ export default class FormComponent extends Component {
     valueChanged: boolean | undefined;
     subForm: any;
     formSrc: any;
-    get dataReady(): Promise<any>;
+    get dataReady(): any;
     get emptyValue(): {
         data: {};
     };

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

@@ -102,7 +102,8 @@ class FormComponent extends Component_1.default {
         return this.createSubForm();
     }
     get dataReady() {
-        return this.subFormReady || Promise.resolve();
+        var _a;
+        return ((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.dataReady) || this.subFormReady || Promise.resolve();
     }
     get defaultValue() {
         // Not not provide a default value unless the subform is ready so that it will initialize correctly.
@@ -673,6 +674,9 @@ class FormComponent extends Component_1.default {
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);
+        if (flags === null || flags === void 0 ? void 0 : flags.fromSubmission) {
+            this.subForm.submissionReadyResolve(submission);
+        }
     }
     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));

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

@@ -767,10 +767,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('noResultsFound'), noChoicesText: this.t('noChoices'), searchPlaceholderValue: this.t('typeToSearch'), 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) {
@@ -902,12 +902,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);
@@ -995,20 +989,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/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/utils/ChoicesWrapper.d.ts

@@ -1,38 +1,17 @@
-export namespace KEY_CODES {
-    let BACK_KEY: number;
-    let DELETE_KEY: number;
-    let TAB_KEY: number;
-    let ENTER_KEY: number;
-    let A_KEY: number;
-    let ESC_KEY: number;
-    let UP_KEY: number;
-    let DOWN_KEY: number;
-    let PAGE_UP_KEY: number;
-    let PAGE_DOWN_KEY: number;
-}
 export default ChoicesWrapper;
 declare class ChoicesWrapper extends Choices {
     constructor(...args: any[]);
-    _onTabKey({ activeItems, hasActiveDropdown }: {
-        activeItems: any;
-        hasActiveDropdown: any;
-    }): void;
+    _onTabKey(): void;
     isDirectionUsing: boolean;
     shouldOpenDropDown: boolean;
     _onTouchEnd(event: any): void;
-    _handleButtonAction(activeItems: any, element: any): void;
-    _onEnterKey(args: any): void;
+    _onEnterKey(...args: any[]): void;
     _onDirectionKey(...args: any[]): void;
     timeout: NodeJS.Timeout | undefined;
     _selectHighlightedChoice(): void;
     _onKeyDown(event: any): void;
-    onSelectValue({ event, activeItems, hasActiveDropdown }: {
-        event: any;
-        activeItems: any;
-        hasActiveDropdown: any;
-    }): void;
+    onSelectValue(event: any, hasActiveDropdown: any): void;
     showDropdown(...args: any[]): void;
     hideDropdown(...args: any[]): void;
-    _onBlur(...args: any[]): void;
 }
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';

package/lib/cjs/utils/ChoicesWrapper.js

@@ -1,48 +1,30 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KEY_CODES = void 0;
-const choices_js_1 = __importDefault(require("@formio/choices.js"));
-/**
- * TODO: REMOVE THIS ONCE THE PULL REQUEST HAS BEEN RESOLVED.
- *
- * https://github.com/jshjohnson/Choices/pull/788
- *
- * This is intentionally not part of the extended class, since other components use Choices and need this fix as well.
- * @type {Choices._generatePlaceholderValue}
- * @private
- */
-choices_js_1.default.prototype._generatePlaceholderValue = function () {
-    if (this._isSelectElement && this.passedElement.placeholderOption) {
-        const { placeholderOption } = this.passedElement;
-        return placeholderOption ? placeholderOption.text : false;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-    const { placeholder, placeholderValue } = this.config;
-    const { element: { dataset }, } = this.passedElement;
-    if (placeholder) {
-        if (placeholderValue) {
-            return placeholderValue;
-        }
-        if (dataset.placeholder) {
-            return dataset.placeholder;
-        }
-    }
-    return false;
-};
-exports.KEY_CODES = {
-    BACK_KEY: 46,
-    DELETE_KEY: 8,
-    TAB_KEY: 9,
-    ENTER_KEY: 13,
-    A_KEY: 65,
-    ESC_KEY: 27,
-    UP_KEY: 38,
-    DOWN_KEY: 40,
-    PAGE_UP_KEY: 33,
-    PAGE_DOWN_KEY: 34,
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+const choices_js_1 = __importStar(require("choices.js"));
+const ExtendedKeyCodeMap = Object.assign(Object.assign({}, choices_js_1.KeyCodeMap), { TAB_KEY: 9 });
 class ChoicesWrapper extends choices_js_1.default {
     constructor(...args) {
         super(...args);
@@ -69,24 +51,13 @@ class ChoicesWrapper extends choices_js_1.default {
         }
         this._wasTap = true;
     }
-    _handleButtonAction(activeItems, element) {
-        if (!this._isSelectOneElement) {
-            return super._handleButtonAction(activeItems, element);
-        }
-        if (!activeItems ||
-            !element ||
-            !this.config.removeItems ||
-            !this.config.removeItemButton) {
-            return;
-        }
-        super._handleButtonAction(activeItems, element);
-    }
-    _onEnterKey(args) {
+    _onEnterKey(...args) {
+        const [event] = args;
         // Prevent dropdown form opening when removeItemButton was pressed using 'Enter' on keyboard
-        if (args.event.target.className === 'choices__button') {
+        if (event.target.className === 'choices__button') {
             this.shouldOpenDropDown = false;
         }
-        super._onEnterKey(args);
+        super._onEnterKey(...args);
     }
     _onDirectionKey(...args) {
         if (!this._isSelectOneElement) {
@@ -100,17 +71,18 @@ class ChoicesWrapper extends choices_js_1.default {
             this.isDirectionUsing = false;
         }, 250);
     }
-    _onTabKey({ activeItems, hasActiveDropdown }) {
-        if (hasActiveDropdown) {
-            this._selectHighlightedChoice(activeItems);
+    _onTabKey() {
+        if (this.dropdown.isActive) {
+            this._selectHighlightedChoice();
         }
     }
     _selectHighlightedChoice() {
-        const highlightedChoice = this.dropdown.getChild(`.${this.config.classNames.highlightedState}`);
+        const highlightedChoice = this.dropdown.element.querySelector(`.${this.config.classNames.highlightedState}`);
         if (highlightedChoice) {
             const id = highlightedChoice.dataset.id;
-            const choice = id && this._store.getChoiceById(id);
+            const choice = id && this._store.getChoiceById(Number(id));
             this._addItem({
+                id: choice.id,
                 value: choice.value,
                 label: choice.label,
                 choiceId: choice.id,
@@ -121,61 +93,16 @@ class ChoicesWrapper extends choices_js_1.default {
             });
             this._triggerChange(choice.value);
         }
-        event.preventDefault();
     }
     _onKeyDown(event) {
-        if (!this._isSelectOneElement) {
-            return super._onKeyDown(event);
-        }
-        const { target, keyCode, ctrlKey, metaKey } = event;
-        if (target !== this.input.element &&
-            !this.containerOuter.element.contains(target)) {
-            return;
-        }
-        const activeItems = this._store.activeItems;
-        const hasFocusedInput = this.input.isFocussed;
-        const hasActiveDropdown = this.dropdown.isActive;
-        const hasItems = this.itemList.hasChildren;
-        const keyString = String.fromCharCode(keyCode);
-        const { BACK_KEY, DELETE_KEY, TAB_KEY, ENTER_KEY, A_KEY, ESC_KEY, UP_KEY, DOWN_KEY, PAGE_UP_KEY, PAGE_DOWN_KEY, } = exports.KEY_CODES;
-        const hasCtrlDownKeyPressed = ctrlKey || metaKey;
-        // If a user is typing and the dropdown is not active
-        if (!hasActiveDropdown && !this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
-            const currentValue = this.input.element.value;
-            this.input.element.value = currentValue ? `${currentValue}${keyString}` : keyString;
-            this.showDropdown();
-        }
-        // Map keys to key actions
-        const keyDownActions = {
-            [A_KEY]: this._onAKey,
-            [TAB_KEY]: this._onTabKey,
-            [ENTER_KEY]: this._onEnterKey,
-            [ESC_KEY]: this._onEscapeKey,
-            [UP_KEY]: this._onDirectionKey,
-            [PAGE_UP_KEY]: this._onDirectionKey,
-            [DOWN_KEY]: this._onDirectionKey,
-            [PAGE_DOWN_KEY]: this._onDirectionKey,
-            [DELETE_KEY]: this._onDeleteKey,
-            [BACK_KEY]: this._onDeleteKey,
-        };
-        // If keycode has a function, run it
-        if (keyDownActions[keyCode]) {
-            keyDownActions[keyCode]({
-                event,
-                target,
-                keyCode,
-                metaKey,
-                activeItems,
-                hasFocusedInput,
-                hasActiveDropdown,
-                hasItems,
-                hasCtrlDownKeyPressed,
-            });
-        }
+        const keyCode = event.keyCode;
+        return this._isSelectOneElement && keyCode === ExtendedKeyCodeMap.TAB_KEY
+            ? this._onTabKey()
+            : super._onKeyDown(event);
     }
-    onSelectValue({ event, activeItems, hasActiveDropdown }) {
+    onSelectValue(event, hasActiveDropdown) {
         if (hasActiveDropdown) {
-            this._selectHighlightedChoice(activeItems);
+            this._selectHighlightedChoice();
         }
         else if (this._isSelectOneElement) {
             this.showDropdown();
@@ -183,11 +110,13 @@ class ChoicesWrapper extends choices_js_1.default {
         }
     }
     showDropdown(...args) {
-        if (!this.shouldOpenDropDown) {
-            this.shouldOpenDropDown = true;
-            return;
-        }
-        super.showDropdown(...args);
+        setTimeout(() => {
+            if (!this.shouldOpenDropDown) {
+                this.shouldOpenDropDown = true;
+                return;
+            }
+            super.showDropdown(...args);
+        }, 0);
     }
     hideDropdown(...args) {
         if (this.isDirectionUsing) {
@@ -195,11 +124,5 @@ class ChoicesWrapper extends choices_js_1.default {
         }
         super.hideDropdown(...args);
     }
-    _onBlur(...args) {
-        if (this._isScrollingOnIe) {
-            return;
-        }
-        super._onBlur(...args);
-    }
 }
 exports.default = ChoicesWrapper;

package/lib/mjs/Form.d.ts

@@ -48,7 +48,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.
@@ -117,9 +117,7 @@ export default class Form extends Element {
         /**
          * - The translation file for this rendering.
          */
-        i18n?: {
-            [key: string]: string;
-        } | undefined;
+        i18n?: Record<string, Record<string, string>> | undefined;
         /**
          * - Custom logic for creation of elements.
          */

package/lib/mjs/Form.js

@@ -51,7 +51,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.

package/lib/mjs/WizardBuilder.js

@@ -255,10 +255,23 @@ export default class WizardBuilder extends WebformBuilder {
         if (component instanceof WizardBuilder) {
             return;
         }
+        if (!window.sessionStorage) {
+            return console.warn(this.t('sessionStorageSupportError'));
+        }
+        // If pasting after the Wizard's page, check if a full Wizard page was copied and pass it to addPage method
         if (this._form.components.find(comp => _.isEqual(component.component, comp))) {
-            this.addPage(component);
+            const data = window.sessionStorage.getItem('formio.clipboard');
+            if (data) {
+                const schema = JSON.parse(data);
+                // If the copied component is not a Wizard's page, do nothing since we can't paste outside the panel in Wizard
+                if (schema.type !== 'panel') {
+                    return;
+                }
+                this.addPage(schema);
+            }
         }
         else {
+            // If we are not trying to paster after the current Wizard's page, just pass it to the WebformBuilder
             return super.pasteComponent(component);
         }
     }

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

@@ -13,7 +13,7 @@ export default class FormComponent extends Component {
     valueChanged: boolean | undefined;
     subForm: any;
     formSrc: any;
-    get dataReady(): Promise<any>;
+    get dataReady(): any;
     get emptyValue(): {
         data: {};
     };

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

@@ -97,7 +97,7 @@ export default class FormComponent extends Component {
         return this.createSubForm();
     }
     get dataReady() {
-        return this.subFormReady || Promise.resolve();
+        return this.subForm?.dataReady || this.subFormReady || Promise.resolve();
     }
     get defaultValue() {
         // Not not provide a default value unless the subform is ready so that it will initialize correctly.
@@ -663,6 +663,9 @@ export default class FormComponent extends Component {
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);
+        if (flags?.fromSubmission) {
+            this.subForm.submissionReadyResolve(submission);
+        }
     }
     isEmpty(value = this.dataValue) {
         return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);

package/lib/mjs/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/mjs/components/select/Select.js

@@ -772,8 +772,8 @@ export default class SelectComponent extends ListComponent {
             removeItemButton: this.component.disabled ? false : _.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,
@@ -801,6 +801,7 @@ export default class SelectComponent extends ListComponent {
                 }),
             valueComparer: _.isEqual,
             resetScrollPosition: false,
+            duplicateItemsAllowed: false,
             ...customOptions,
         };
     }
@@ -933,12 +934,6 @@ export default class SelectComponent extends ListComponent {
                 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);
@@ -1024,20 +1019,6 @@ export default class SelectComponent extends ListComponent {
             });
         }
     }
-    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/mjs/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/mjs/components/tags/Tags.js

@@ -1,6 +1,6 @@
 import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';
 export default class TagsComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -127,7 +127,7 @@ export default class TagsComponent extends Input {
         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/mjs/utils/ChoicesWrapper.d.ts

@@ -1,38 +1,17 @@
-export namespace KEY_CODES {
-    let BACK_KEY: number;
-    let DELETE_KEY: number;
-    let TAB_KEY: number;
-    let ENTER_KEY: number;
-    let A_KEY: number;
-    let ESC_KEY: number;
-    let UP_KEY: number;
-    let DOWN_KEY: number;
-    let PAGE_UP_KEY: number;
-    let PAGE_DOWN_KEY: number;
-}
 export default ChoicesWrapper;
 declare class ChoicesWrapper extends Choices {
     constructor(...args: any[]);
-    _onTabKey({ activeItems, hasActiveDropdown }: {
-        activeItems: any;
-        hasActiveDropdown: any;
-    }): void;
+    _onTabKey(): void;
     isDirectionUsing: boolean;
     shouldOpenDropDown: boolean;
     _onTouchEnd(event: any): void;
-    _handleButtonAction(activeItems: any, element: any): void;
-    _onEnterKey(args: any): void;
+    _onEnterKey(...args: any[]): void;
     _onDirectionKey(...args: any[]): void;
     timeout: NodeJS.Timeout | undefined;
     _selectHighlightedChoice(): void;
     _onKeyDown(event: any): void;
-    onSelectValue({ event, activeItems, hasActiveDropdown }: {
-        event: any;
-        activeItems: any;
-        hasActiveDropdown: any;
-    }): void;
+    onSelectValue(event: any, hasActiveDropdown: any): void;
     showDropdown(...args: any[]): void;
     hideDropdown(...args: any[]): void;
-    _onBlur(...args: any[]): void;
 }
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';