@formio/js 5.0.0-dev.5672.279701a → 5.0.0-dev.5673.ae99c16

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

@@ -10,7 +10,7 @@ class HTMLComponent extends Component_1.default {
         return Component_1.default.schema({
             label: 'HTML',
             type: 'htmlelement',
-            tag: 'p',
+            tag: 'div',
             attrs: [],
             content: '',
             input: false,

package/lib/cjs/components/number/Number.d.ts

@@ -27,11 +27,26 @@ export default class NumberComponent extends Input {
      */
     createNumberMask(): any;
     isDecimalAllowed(): any;
-    parseNumber(value: any): number;
+    /**
+     * parses a numeric string by removing the delimiters and replacing the decimal separator back to '.' so that it can
+     * be processed by either parseInt or parseFloat
+     * @param {string} value the value to be parsed
+     * @returns {number} a parsed number
+     */
+    parseNumber(value: string): number;
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;
-    parseValue(input: any): number;
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
+    parseValue(input: string | number): string | null;
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;

package/lib/cjs/components/number/Number.js

@@ -45,19 +45,19 @@ class NumberComponent extends Input_1.default {
         return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];
     }
     constructor(...args) {
-        var _a, _b;
+        var _a, _b, _c;
         super(...args);
         const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
             || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
             || separators.decimalSeparator;
         if (this.component.delimiter) {
-            if (this.options.hasOwnProperty('thousandsSeparator')) {
-                console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
-            }
-            this.delimiter = ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter = this.component.thousandsSeparator || ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
         }
         else {
+            if (this.component.thousandsSeparator || ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) || this.options.thousandsSeparator) {
+                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+            }
             this.delimiter = '';
         }
         const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);
@@ -79,7 +79,7 @@ class NumberComponent extends Input_1.default {
             prefix: '',
             suffix: '',
             requireDecimal: lodash_1.default.get(this.component, 'requireDecimal', false),
-            thousandsSeparatorSymbol: lodash_1.default.get(this.component, 'thousandsSeparator', this.delimiter),
+            thousandsSeparatorSymbol: this.delimiter || '',
             decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),
             decimalLimit: lodash_1.default.get(this.component, 'decimalLimit', this.decimalLimit),
             allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),
@@ -91,6 +91,11 @@ class NumberComponent extends Input_1.default {
     }
     get defaultValue() {
         let defaultValue = super.defaultValue;
+        if (typeof defaultValue === 'string') {
+            // Default value may be a string or have custom thousands separators or decimal symbols, so we need to call
+            // parseNumber on it
+            defaultValue = this.parseNumber(defaultValue);
+        }
         if (!defaultValue && this.component.defaultValue === 0) {
             defaultValue = this.component.defaultValue;
         }
@@ -102,6 +107,12 @@ class NumberComponent extends Input_1.default {
     isDecimalAllowed() {
         return lodash_1.default.get(this.component, 'allowDecimal', !(this.component.validate && this.component.validate.integer));
     }
+    /**
+     * parses a numeric string by removing the delimiters and replacing the decimal separator back to '.' so that it can
+     * be processed by either parseInt or parseFloat
+     * @param {string} value the value to be parsed
+     * @returns {number} a parsed number
+     */
     parseNumber(value) {
         // Remove delimiters and convert decimal separator to dot.
         value = value.split(this.delimiter).join('').replace(this.decimalSeparator, '.');
@@ -146,6 +157,15 @@ class NumberComponent extends Input_1.default {
     setValueAt(index, value, flags = {}) {
         return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);
     }
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
     parseValue(input) {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');

package/lib/cjs/components/number/fixtures/comp10.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+    }[];
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp10.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": false,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "validateWhenHidden": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "defaultValue": "123.23"
+        }
+    ]
+};

package/lib/cjs/components/number/fixtures/comp8.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        applyMaskOn?: undefined;
+        mask?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        truncateMultipleSpaces?: undefined;
+        decimalSymbol?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp8.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": false,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": "-"
+        },
+        {
+            "type": "button",
+            "label": "Submit",
+            "key": "submit",
+            "disableOnInvalid": true,
+            "input": true,
+            "tableView": false
+        }
+    ]
+};

package/lib/cjs/components/number/fixtures/comp9.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        thousandsSeparator: string;
+    }[];
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp9.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": true,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": ",",
+            "thousandsSeparator": "."
+        }
+    ]
+};

package/lib/cjs/components/number/fixtures/index.d.ts

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

package/lib/cjs/components/number/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -18,3 +18,9 @@ const comp6_1 = __importDefault(require("./comp6"));
 exports.comp6 = comp6_1.default;
 const comp7_1 = __importDefault(require("./comp7"));
 exports.comp7 = comp7_1.default;
+const comp8_1 = __importDefault(require("./comp8"));
+exports.comp8 = comp8_1.default;
+const comp9_1 = __importDefault(require("./comp9"));
+exports.comp9 = comp9_1.default;
+const comp10_1 = __importDefault(require("./comp10"));
+exports.comp10 = comp10_1.default;

package/lib/cjs/components/panel/Panel.d.ts

@@ -4,6 +4,7 @@ export default class PanelComponent extends NestedComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

package/lib/cjs/components/panel/Panel.js

@@ -27,6 +27,7 @@ class PanelComponent extends NestedComponent_1.default {
             icon: 'list-alt',
             group: 'layout',
             documentation: '/userguide/form-building/layout-components#panel',
+            showPreview: false,
             weight: 30,
             schema: PanelComponent.schema()
         };

package/lib/cjs/components/radio/Radio.d.ts

@@ -8,26 +8,10 @@ export default class RadioComponent extends ListComponent {
         schema: any;
     };
     static get conditionOperatorsSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: any;
-            data: {
-                custom(): any;
-            };
-        };
+        valueComponent(classComp: any): any;
     };
     static get serverConditionSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: any;
-            data: {
-                custom: string;
-            };
-        };
+        valueComponent(classComp: any): any;
     };
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);

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

@@ -33,31 +33,22 @@ class RadioComponent extends ListComponent_1.default {
     }
     static get conditionOperatorsSettings() {
         return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {
-                return {
-                    type: 'select',
-                    dataSrc: 'custom',
-                    valueProperty: 'value',
-                    dataType: classComp.dataType || '',
-                    data: {
-                        custom() {
-                            return classComp.values;
+                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';
+                return isValuesSrc
+                    ? {
+                        type: 'select',
+                        dataSrc: 'custom',
+                        valueProperty: 'value',
+                        dataType: classComp.dataType || '',
+                        data: {
+                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
                         }
-                    },
-                };
+                    }
+                    : Object.assign(Object.assign({}, classComp), { type: 'select' });
             } });
     }
     static get serverConditionSettings() {
-        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {
-                return {
-                    type: 'select',
-                    dataSrc: 'custom',
-                    valueProperty: 'value',
-                    dataType: classComp.dataType || '',
-                    data: {
-                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
-                    },
-                };
-            } });
+        return RadioComponent.conditionOperatorsSettings;
     }
     static savedValueTypes(schema) {
         const { boolean, string, number, object, array } = utils_1.componentValueTypes;
@@ -264,6 +255,16 @@ class RadioComponent extends ListComponent_1.default {
         if (method.toUpperCase() === 'GET') {
             body = null;
         }
+        const limit = this.component.limit || 100;
+        const skip = this.isScrollLoading ? this.selectOptions.length : 0;
+        // Allow for url interpolation.
+        url = this.sanitize(this.interpolate(url, {
+            formioBase: Formio_1.Formio.getBaseUrl(),
+            search,
+            limit,
+            skip,
+            page: Math.abs(Math.floor(skip / limit))
+        }), this.shouldSanitizeValue);
         // Set ignoreCache if it is
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.
@@ -295,14 +296,15 @@ class RadioComponent extends ListComponent_1.default {
     setItems(items) {
         const listData = [];
         items === null || items === void 0 ? void 0 : items.forEach((item, i) => {
+            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);
             this.loadedOptions[i] = {
-                value: this.component.valueProperty ? item[this.component.valueProperty] : item,
-                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)
+                value: this.component.valueProperty ? valueAtProperty : item,
+                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
             };
-            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);
-            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||
-                (!this.isRadio && lodash_1.default.isObject(item[this.component.valueProperty])) ||
-                (!this.isRadio && lodash_1.default.isBoolean(item[this.component.valueProperty])))) {
+            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
+            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(valueAtProperty) ||
+                (!this.isRadio && lodash_1.default.isObject(valueAtProperty)) ||
+                (!this.isRadio && lodash_1.default.isBoolean(valueAtProperty)))) {
                 this.loadedOptions[i].invalid = true;
             }
         });

package/lib/cjs/components/radio/fixtures/comp12.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        optionsLabelPosition: string;
+        tableView: boolean;
+        dataSrc: string;
+        values: {
+            label: string;
+            value: string;
+            shortcut: string;
+        }[];
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        template: string;
+        authenticate: boolean;
+        input: boolean;
+        inputType: string;
+    }[];
+}
+export default _default;

package/lib/cjs/components/radio/fixtures/comp12.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Select Boxes",
+            "optionsLabelPosition": "right",
+            "tableView": false,
+            "dataSrc": "url",
+            "values": [
+                {
+                    "label": "",
+                    "value": "",
+                    "shortcut": ""
+                }
+            ],
+            "valueProperty": "data.name",
+            "validateWhenHidden": false,
+            "key": "selectBoxes",
+            "type": "selectboxes",
+            "data": {
+                "url": "https://remote-dev.form.io/projectId/name/submission",
+                "headers": [
+                    {
+                        "key": "",
+                        "value": ""
+                    }
+                ]
+            },
+            "template": "<span>{{ item.data.name }}</span>",
+            "authenticate": true,
+            "input": true,
+            "inputType": "checkbox"
+        }
+    ]
+};

package/lib/cjs/components/radio/fixtures/index.d.ts

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

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -26,3 +26,5 @@ const comp10_1 = __importDefault(require("./comp10"));
 exports.comp10 = comp10_1.default;
 const comp11_1 = __importDefault(require("./comp11"));
 exports.comp11 = comp11_1.default;
+const comp12_1 = __importDefault(require("./comp12"));
+exports.comp12 = comp12_1.default;

package/lib/cjs/components/recaptcha/ReCaptcha.d.ts

@@ -1,6 +1,12 @@
 export default class ReCaptchaComponent extends Component {
     static get builderInfo(): {};
     static savedValueTypes(): never[];
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+    };
+    static get serverConditionSettings(): {
+        operators: string[];
+    };
     render(): string;
     recaptchaResult: any;
     createInput(): void;

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

@@ -31,6 +31,12 @@ class ReCaptchaComponent extends Component_1.default {
     static savedValueTypes() {
         return [];
     }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
+    }
+    static get serverConditionSettings() {
+        return ReCaptchaComponent.conditionOperatorsSettings;
+    }
     render() {
         this.recaptchaResult = null;
         if (this.builderMode) {

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

@@ -9,9 +9,47 @@ export default class SelectComponent extends ListComponent {
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): any;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     static get conditionOperatorsSettings(): {
         valueComponent(classComp: any): any;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("../../Formio");
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const Form_1 = __importDefault(require("../../Form"));
 const utils_1 = require("../../utils/utils");
 const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
@@ -63,6 +62,7 @@ class SelectComponent extends ListComponent_1.default {
         return SelectComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
+        const numberType = () => ({ type: 'number' });
         return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {
                 const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });
                 if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {
@@ -77,6 +77,15 @@ class SelectComponent extends ListComponent_1.default {
           `;
                 }
                 return valueComp;
+            }, dataTypeOperators: {
+                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
+            }, dataTypeValueComponents: {
+                number: {
+                    lessThan: numberType,
+                    greaterThan: numberType,
+                    lessThanOrEqual: numberType,
+                    greaterThanOrEqual: numberType,
+                },
             } });
     }
     static savedValueTypes(schema) {
@@ -527,13 +536,13 @@ class SelectComponent extends ListComponent_1.default {
             skip,
         };
         // Allow for url interpolation.
-        url = this.interpolate(url, {
+        url = this.sanitize(this.interpolate(url, {
             formioBase: Formio_1.Formio.getBaseUrl(),
             search,
             limit,
             skip,
             page: Math.abs(Math.floor(skip / limit))
-        });
+        }), this.shouldSanitizeValue);
         // Add search capability.
         if (this.component.searchField && search) {
             const searchValue = Array.isArray(search)
@@ -834,7 +843,7 @@ class SelectComponent extends ListComponent_1.default {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+            this.addFocusBlurEvents(this.choices.input.element);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -1558,8 +1567,8 @@ class SelectComponent extends ListComponent_1.default {
         super.detach();
     }
     focus() {
+        super.focus.call(this);
         if (this.focusableElement) {
-            super.focus.call(this);
             this.focusableElement.focus();
         }
     }