@formio/js 5.1.0-dev.6030.abc8cfc → 5.1.0-dev.6036.0df1d6a

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/_classes/component/Component.d.ts

@@ -119,13 +119,6 @@ declare class Component extends Element {
      */
     paths: import('@formio/core').ComponentPaths;
     _path: string;
-    /**
-     * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
-     * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
-     * conditionallyHidden separately from "regular" visibility.
-     */
-    _parentConditionallyHidden: any;
-    _conditionallyHidden: any;
     /**
      * Determines if this component is visible, or not.
      */
@@ -170,6 +163,7 @@ declare class Component extends Element {
      */
     info: any;
     get componentsMap(): object;
+    get parentConditionallyHidden(): any;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -239,6 +233,7 @@ declare class Component extends Element {
      * @returns {boolean} - Whether the component is conditionally hidden.
      */
     checkConditionallyHidden(data?: object, row?: object): boolean;
+    _conditionallyHidden: any;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

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

@@ -356,8 +356,7 @@ class Component extends Element_1.default {
          * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
          * conditionallyHidden separately from "regular" visibility.
          */
-        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;
-        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;
+        this.checkConditionallyHidden(null, data);
         /**
          * Determines if this component is visible, or not.
          */
@@ -465,6 +464,18 @@ class Component extends Element_1.default {
         var _a;
         return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};
     }
+    get parentConditionallyHidden() {
+        let parentHidden = false;
+        let currentParent = this.parent;
+        while (currentParent) {
+            parentHidden = parentHidden || currentParent._conditionallyHidden;
+            if (parentHidden) {
+                break;
+            }
+            currentParent = currentParent.parent;
+        }
+        return parentHidden;
+    }
     get data() {
         return this._data;
     }
@@ -505,7 +516,7 @@ class Component extends Element_1.default {
     init() {
         var _a;
         this.disabled = this.shouldDisabled;
-        this._conditionallyHidden = this.checkConditionallyHidden();
+        this.checkConditionallyHidden();
         this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
@@ -672,7 +683,7 @@ class Component extends Element_1.default {
         return this._visible && this._parentVisible;
     }
     get conditionallyHidden() {
-        return this._conditionallyHidden || this._parentConditionallyHidden;
+        return this._conditionallyHidden || this.parentConditionallyHidden;
     }
     /**
      * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
@@ -681,10 +692,13 @@ class Component extends Element_1.default {
      * @returns {boolean} - Whether the component is conditionally hidden.
      */
     checkConditionallyHidden(data = null, row = null) {
+        this._conditionallyHidden = false;
         if (!this.hasCondition()) {
-            return false;
+            this._conditionallyHidden = this.parentConditionallyHidden;
+            return this._conditionallyHidden;
         }
-        return !this.conditionallyVisible(data, row);
+        this._conditionallyHidden = !this.conditionallyVisible(data, row) || this.parentConditionallyHidden;
+        return this._conditionallyHidden;
     }
     get currentForm() {
         return this._currentForm;
@@ -1951,12 +1965,7 @@ class Component extends Element_1.default {
             this.redraw();
         }
         // Check advanced conditions (and cache the result)
-        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
-        let shouldClear = false;
-        if (isConditionallyHidden !== this._conditionallyHidden) {
-            this._conditionallyHidden = isConditionallyHidden;
-            shouldClear = true;
-        }
+        const shouldClear = this.checkConditionallyHidden(data, row);
         // Check visibility
         const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.visible !== visible) {
@@ -2494,8 +2503,7 @@ class Component extends Element_1.default {
      * @returns {*} - The value for this component.
      */
     get dataValue() {
-        if (!this.key ||
-            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
+        if (!this.key) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2512,9 +2520,7 @@ class Component extends Element_1.default {
      * @param {*} value - The value to set for this component.
      */
     set dataValue(value) {
-        if (!this.allowData ||
-            !this.key ||
-            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
+        if (!this.allowData || !this.key) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {

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

@@ -85,18 +85,16 @@ class NestedComponent extends Field_1.default {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
-        const isConditionallyHidden = this.checkConditionallyHidden();
+        this.checkConditionallyHidden();
         const forceShow = this.shouldForceShow();
         const forceHide = this.shouldForceHide();
         this.components.forEach((component) => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.
             component.parentVisible = isVisible;
-            component._parentConditionallyHidden = isConditionallyHidden;
             let visible;
             if (component.hasCondition()) {
-                component._conditionallyHidden = component.checkConditionallyHidden() || component._parentConditionallyHidden;
-                visible = !component.conditionallyHidden;
+                visible = !component.checkConditionallyHidden();
             }
             else {
                 visible = !component.component.hidden;
@@ -377,7 +375,6 @@ class NestedComponent extends Field_1.default {
         data = data || this.data;
         options.parent = this;
         options.parentVisible = this.visible;
-        options.parentConditionallyHidden = this.conditionallyHidden;
         options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;
         options.localRoot = this.localRoot;
         options.skipInit = true;

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

@@ -1159,9 +1159,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent) {
-            this.parent.checkComponentConditions();
-        }
         this.dataValue = value;
         // Refresh editRow data when data changes.
         this.dataValue.forEach((row, rowIndex) => {
@@ -1192,7 +1189,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

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/html/HTML.js

@@ -58,8 +58,7 @@ class HTMLComponent extends Component_1.default {
         super.checkRefreshOn(changed);
         let visible;
         if (this.hasCondition()) {
-            this._conditionallyHidden = this.checkConditionallyHidden();
-            visible = !this.conditionallyHidden;
+            visible = !this.checkConditionallyHidden();
         }
         else {
             visible = !this.component.hidden;

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/tabs/Tabs.js

@@ -143,6 +143,7 @@ class TabsComponent extends NestedComponent_1.default {
             this.addClass(this.refs[this.tabLinkKey][index], 'active');
             this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
         }
+        this.setValue(this.data);
         this.triggerChange();
     }
     beforeFocus(component) {

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.
          */