@formio/js 5.3.6 → 5.4.0

package/lib/mjs/components/day/Day.js

@@ -166,25 +166,19 @@ export default class DayComponent extends Field {
         };
     }
     get days() {
-        if (this._days) {
-            return this._days;
-        }
-        this._days = [
+        const days = [
             { value: '', label: _.get(this.component, 'fields.day.placeholder', '') },
         ];
         for (let x = 1; x <= 31; x++) {
-            this._days.push({
+            days.push({
                 value: x,
                 label: x.toString(),
             });
         }
-        return this._days;
+        return days;
     }
     get months() {
-        if (this._months) {
-            return this._months;
-        }
-        this._months = [
+        const months = [
             {
                 value: '',
                 label: _.get(this.component, 'fields.month.placeholder') ||
@@ -203,24 +197,21 @@ export default class DayComponent extends Field {
             { value: 11, label: 'November' },
             { value: 12, label: 'December' },
         ];
-        return this._months;
+        return months;
     }
     get years() {
-        if (this._years) {
-            return this._years;
-        }
-        this._years = [
+        const years = [
             { value: '', label: _.get(this.component, 'fields.year.placeholder', '') },
         ];
         const minYears = _.get(this.component, 'fields.year.minYear', 1900) || 1900;
         const maxYears = _.get(this.component, 'fields.year.maxYear', 2030) || 2030;
         for (let x = minYears; x <= maxYears; x++) {
-            this._years.push({
+            years.push({
                 value: x,
                 label: x.toString(),
             });
         }
-        return this._years;
+        return years;
     }
     setErrorClasses(elements, dirty, hasError) {
         super.setErrorClasses(elements, dirty, hasError);

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

@@ -538,7 +538,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),
                 getView: (component, data) => {
                     const instance = flattenedComponents[component.key];
-                    const view = instance ? instance.getView(data || instance.dataValue) : '';
+                    const view = instance ? instance.getView(instance.dataValue) : '';
                     // If there is an html tag in view, don't allow it to be injected in template
                     const htmlTagRegExp = new RegExp('<(.*?)>');
                     return typeof view === 'string' &&
@@ -948,9 +948,19 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
             const column = _.clone(col);
             const options = _.clone(this.options);
+            const rootSubmissionTz = _.get(this.root, 'options.submissionTimezone');
+            if (rootSubmissionTz && !options.submissionTimezone) {
+                options.submissionTimezone = rootSubmissionTz;
+            }
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
+            if (this.submissionTimezone) {
+                options.submissionTimezone = this.submissionTimezone;
+                if (column.type === 'datetime') {
+                    column.widget = { ...column.widget, submissionTimezone: this.submissionTimezone };
+                }
+            }
             options.onChange = (flags = {}, changed, modified) => {
                 if (changed.instance.root?.id && this.root?.id !== changed.instance.root.id) {
                     changed.instance.root?.triggerChange?.(flags, changed, modified);

package/lib/mjs/components/fieldset/Fieldset.js

@@ -7,6 +7,7 @@ export default class FieldsetComponent extends NestedComponent {
             type: 'fieldset',
             legend: '',
             components: [],
+            clearOnHide: false,
             input: false,
             persistent: false,
         }, ...extend);

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

@@ -30,6 +30,8 @@ export default class FileComponent extends Field {
     } | undefined;
     isSyncing: boolean | undefined;
     abortUploads: any[] | undefined;
+    pendingfiles: any;
+    resolvedFiles: any[] | undefined;
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
@@ -147,7 +149,7 @@ export default class FileComponent extends Field {
     getMultipartOptions(fileToSync: any): any;
     uploadFile(fileToSync: any): Promise<any>;
     upload(): Promise<void | {
-        fileToSync: never;
+        fileToSync: any;
         fileInfo: any;
     }[]>;
     syncFiles(): Promise<void>;

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

@@ -96,6 +96,8 @@ export default class FileComponent extends Field {
         };
         this.isSyncing = false;
         this.abortUploads = [];
+        this.pendingfiles = [];
+        this.resolvedFiles = [];
     }
     get dataReady() {
         return this.filesReady || Promise.resolve();
@@ -695,22 +697,42 @@ export default class FileComponent extends Field {
             };
         }
         // Check file minimum size
-        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too small; it must be at least {{ size }}', {
-                    size: this.component.fileMinSize,
-                }),
-            };
+        if (this.component.fileMinSize) {
+            const interpolatedMinSize = this.interpolate(this.component.fileMinSize, this.evalContext());
+            // This case is when the user entered fileMinSize expression, but did not enter or made a typo when
+            // setting the fileMinSize variable in the config of the project
+            if (!interpolatedMinSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMinSize(file, interpolatedMinSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooSmall', {
+                        size: interpolatedMinSize,
+                    }),
+                };
+            }
         }
         // Check file maximum size
-        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too big; it must be at most {{ size }}', {
-                    size: this.component.fileMaxSize,
-                }),
-            };
+        if (this.component.fileMaxSize) {
+            const interpolatedMaxSize = this.interpolate(this.component.fileMaxSize, this.evalContext());
+            if (!interpolatedMaxSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMaxSize(file, interpolatedMaxSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooBig', {
+                        size: interpolatedMaxSize,
+                    }),
+                };
+            }
         }
         return {};
     }
@@ -966,7 +988,23 @@ export default class FileComponent extends Field {
                         fileInfo,
                     };
                 }
-                fileInfo = await this.uploadFile(fileToSync);
+                if (fileToSync.status === "success") {
+                    const uploadedFile = this.resolvedFiles.find(x => x.fileToSync.originalName === fileToSync.originalName);
+                    return {
+                        fileToSync: uploadedFile.fileToSync,
+                        fileInfo: uploadedFile.fileInfo,
+                    };
+                }
+                const pendingFile = this.pendingfiles.find(x => x.name === fileToSync.name);
+                if (pendingFile) {
+                    fileInfo = await pendingFile.fileInfoProm;
+                }
+                else {
+                    const promInfo = this.uploadFile(fileToSync);
+                    this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });
+                    fileInfo = await promInfo;
+                }
+                this.pendingfiles = this.pendingfiles.filter(x => x.name !== fileToSync.name);
                 fileToSync.status = 'success';
                 fileToSync.message = this.t('Succefully uploaded');
                 fileInfo.originalName = fileToSync.originalName;
@@ -991,6 +1029,10 @@ export default class FileComponent extends Field {
             finally {
                 delete fileToSync.progress;
                 this.redraw();
+                const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
+                if (!fileExists && fileToSync.status !== 'error') {
+                    this.resolvedFiles.push({ fileToSync, fileInfo });
+                }
             }
             return {
                 fileToSync,
@@ -1007,6 +1049,9 @@ export default class FileComponent extends Field {
                 this.delete(),
                 this.upload(),
             ]);
+            if (filesToUpload.length !== this.filesToSync?.filesToUpload?.length) {
+                return;
+            }
             this.filesToSync.filesToDelete = filesToDelete
                 .filter((file) => file.fileToSync?.status === 'error')
                 .map((file) => file.fileToSync);

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

@@ -561,9 +561,11 @@ export default class FormComponent extends Component {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
+        const hiddenByJsonOnly = !this.hasCondition() && this.component.hidden;
         return (this.subFormReady &&
             (!this.component.hasOwnProperty('reference') || this.component.reference) &&
-            !this.shouldConditionallyClear());
+            !this.shouldConditionallyClear() &&
+            !(hiddenByJsonOnly && this.component.clearOnHide));
     }
     /**
      * Returns the data for the subform.

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

@@ -34,6 +34,7 @@ export default class NumberComponent extends Input {
      * @returns {number} a parsed number
      */
     parseNumber(value: string): number;
+    normalizeValue(value: any, flags?: {}, emptyValue?: null): any;
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;

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

@@ -141,6 +141,23 @@ export default class NumberComponent extends Input {
             return parseFloat(value);
         }
     }
+    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {
+        if (typeof value === 'string') {
+            const result = this.parseNumber(value);
+            value = _.isNaN(result) ? this.emptyValue : result;
+        }
+        if (this.component?.multiple && Array.isArray(value)) {
+            const normilizedValues = value.map((val) => {
+                if (typeof val === 'string') {
+                    const result = this.parseNumber(val);
+                    return _.isNaN(result) ? this.emptyValue : result;
+                }
+                return val;
+            });
+            value = normilizedValues;
+        }
+        return super.normalizeValue(value, flags, emptyValue);
+    }
     setInputMask(input) {
         let numberPattern = '[0-9';
         numberPattern += this.decimalSeparator || '';

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

@@ -522,7 +522,7 @@ export default class SelectComponent extends ListComponent {
                     noUpdateEvent: true,
                 });
             }
-            else if (this.shouldAddDefaultValue && !this.options.readOnly) {
+            else if (this.shouldAddDefaultValue && !this.options.readOnly && this.root && !this.root.submissionSet) {
                 // If a default value is provided then select it.
                 const defaultValue = this.defaultValue;
                 if (!this.isEmpty(defaultValue)) {
@@ -1366,6 +1366,10 @@ export default class SelectComponent extends ListComponent {
             }
             _.set(submission.metadata.selectData, this.path, templateData);
         }
+        else if (!this.templateData[templateValue] &&
+            this.isEmpty(value)) {
+            _.unset(this.root.submission, `metadata.selectData.${this.path}`);
+        }
         if (flags.resetValue && this.root?.submission && !this.options.readOnly) {
             const submission = this.root.submission;
             if (!submission.metadata) {

package/lib/mjs/components/signature/Signature.js

@@ -57,7 +57,7 @@ export default class SignatureComponent extends Input {
             this.component.height = '200px';
         }
         if (this.component.keepOverlayRatio &&
-            this.options?.display === 'pdf' &&
+            this.options.pdf &&
             this.component.overlay?.width &&
             this.component.overlay?.height) {
             this.ratio = this.component.overlay?.width / this.component.overlay?.height;

package/lib/mjs/components/signature/editForm/Signature.edit.display.d.ts

@@ -7,7 +7,6 @@ declare const _default: ({
     placeholder: string;
     weight: number;
     conditional?: undefined;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     type: string;
@@ -24,7 +23,6 @@ declare const _default: ({
         };
     };
     weight: number;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     weight: number;
@@ -32,9 +30,6 @@ declare const _default: ({
     label: string;
     tooltip: string;
     key: string;
-    customConditional: ({ options }: {
-        options: any;
-    }) => boolean;
     input: boolean;
     placeholder?: undefined;
     conditional?: undefined;
@@ -49,6 +44,5 @@ declare const _default: ({
     placeholder?: undefined;
     weight?: undefined;
     conditional?: undefined;
-    customConditional?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/signature/editForm/Signature.edit.display.js

@@ -46,7 +46,6 @@ export default [
         label: 'Keep Overlay Aspect Ratio',
         tooltip: 'If checked, the field will have the same aspect ratio as its preview.',
         key: 'keepOverlayRatio',
-        customConditional: ({ options }) => options?.editForm?.display === 'pdf',
         input: true,
     },
     {

package/lib/mjs/components/table/editForm/Table.edit.display.d.ts

@@ -10,6 +10,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -27,6 +29,8 @@ declare const _default: ({
     autofocus: boolean;
     overrideEditForm: boolean;
     ignore?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -42,6 +46,25 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    defaultValue?: undefined;
+} | {
+    label: string;
+    multiple: boolean;
+    key: string;
+    type: string;
+    input: boolean;
+    tooltip: string;
+    customConditional: string;
+    weight: number;
+    ignore?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -57,6 +80,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -80,5 +105,7 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/table/editForm/Table.edit.display.js

@@ -67,6 +67,16 @@ export default [
         placeholder: 'Number of Columns',
         tooltip: 'Enter the number or columns that should be displayed by this table.',
     },
+    {
+        label: "Column Headers",
+        multiple: true,
+        key: "header",
+        type: "textfield",
+        input: true,
+        tooltip: 'Enter header names for the columns',
+        customConditional: "if(instance && instance.dataValue && Array.isArray(instance.dataValue)) {\r\n  const isAllowToAddHeader = instance.dataValue.length < data.numCols;\r\n  const addBtn = _.get(instance, 'refs.addButton[0]', null);\r\n  if(addBtn) {\r\n    isAllowToAddHeader? addBtn.removeAttribute('disabled'):  addBtn.setAttribute('disabled', 'disabled');\r\n  }\r\n} ",
+        weight: 3,
+    },
     {
         type: 'checkbox',
         label: 'Clone Row Components',

package/lib/mjs/formio.form.js

@@ -7,7 +7,7 @@ import Templates from './templates/Templates';
 import Providers from './providers';
 import Widgets from './widgets';
 import Form, { FormOptions } from './Form';
-import Utils, { Evaluator, registerEvaluator, DefaultEvaluator } from './utils';
+import Utils, { DefaultEvaluator, Evaluator, registerEvaluator } from './utils';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
@@ -90,12 +90,9 @@ export function registerModule(mod, defaultFn = null, options = {}) {
                 break;
             default:
                 if (defaultFn) {
-                    if (!defaultFn(key, mod)) {
-                        console.warn('Unknown module option', key);
-                    }
+                    defaultFn(key, mod);
                     break;
                 }
-                console.log('Unknown module option', key);
         }
     }
 }
@@ -108,7 +105,7 @@ export function useModule(defaultFn = null) {
         plugins = _.isArray(plugins)
             ? plugins
             : [
-                plugins,
+                plugins
             ];
         plugins.forEach((plugin) => {
             if (Array.isArray(plugin)) {
@@ -129,4 +126,4 @@ export function useModule(defaultFn = null) {
 Formio.use = useModule();
 export { Formio as FormioCore } from './Formio';
 // Export the components.
-export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform, DefaultEvaluator, FormOptions, };
+export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform, DefaultEvaluator, FormOptions };

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.3.6"
+    "version": "5.4.0"
     
 }

package/lib/mjs/providers/storage/azure.js

@@ -30,9 +30,15 @@ function azure(formio) {
         downloadFile(file) {
             return formio.makeRequest('file', `${formio.formUrl}/storage/azure?name=${XHR.trim(file.name)}`, 'GET');
         },
-        deleteFile: function deleteFile(fileInfo) {
-            var url = `${formio.formUrl}/storage/azure?name=${XHR.trim(fileInfo.name)}&key=${XHR.trim(fileInfo.key)}`;
-            return formio.makeRequest('', url, 'delete');
+        deleteFile(fileInfo, options) {
+            const name = XHR.trim(fileInfo.name);
+            const key = XHR.trim(fileInfo.key);
+            return formio.makeRequest('', `${formio.formUrl}/storage/azure?name=${encodeURIComponent(name)}&key=${encodeURIComponent(key)}`, 'delete').then((response) => {
+                return {
+                    success: true,
+                    key: response?.key || key,
+                };
+            });
         },
     };
 }

package/lib/mjs/templates/index.d.ts

@@ -20,6 +20,9 @@ declare namespace _default {
         wizardHeaderVertical: {
             form: string;
         };
+        wizardHeaderStepIndicator: {
+            form: string;
+        };
         wizardNav: {
             form: string;
         };

package/lib/mjs/translations/en.d.ts

@@ -76,5 +76,7 @@ declare namespace _default {
     let requiredDayEmpty: string;
     let requiredMonthField: string;
     let requiredYearField: string;
+    let fileTooSmall: string;
+    let fileTooBig: string;
 }
 export default _default;

package/lib/mjs/translations/en.js

@@ -76,4 +76,6 @@ export default {
     requiredDayEmpty: '{{ field }} is required',
     requiredMonthField: '{{ field }} is required',
     requiredYearField: '{{ field }} is required',
+    fileTooSmall: 'File is too small; it must be at least {{ size }}',
+    fileTooBig: 'File is too big; it must be at most {{ size }}'
 };

package/lib/mjs/utils/i18n.d.ts

@@ -7,6 +7,7 @@ export class I18n {
     constructor(languages?: {});
     languages: {};
     language: string;
+    originalLanguage: string;
     currentLanguage: any;
     setLanguages(languages: any): void;
     dir(lang?: string): "rtl" | "ltr";

package/lib/mjs/utils/i18n.js

@@ -12,6 +12,7 @@ for (const lang in i18n.resources) {
 export class I18n {
     languages = i18Defaults;
     language = 'en';
+    originalLanguage = 'en';
     currentLanguage = i18Defaults.en;
     constructor(languages = {}) {
         this.setLanguages(languages);
@@ -66,6 +67,7 @@ export class I18n {
         return new I18n();
     }
     changeLanguage(language, ready = null) {
+        this.originalLanguage = language;
         if (!this.languages[language]) {
             language = 'en';
         }

package/lib/mjs/utils/index.d.ts

@@ -94,7 +94,7 @@ declare const FormioUtils: {
     offsetDate(date: Date, timezone: string): Date;
     zonesLoaded(): boolean;
     shouldLoadZones(timezone: string): boolean;
-    loadZones(url: string, timezone: string): any;
+    loadZones(url: string, _timezone: any): any;
     momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
     formatDate(timezonesUrl: string, value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
     formatOffset(timezonesUrl: string, formatFn: Function, date: string | Date, format: string, timezone: string): string;

package/lib/mjs/utils/utils.d.ts

@@ -202,7 +202,7 @@ export function shouldLoadZones(timezone: string): boolean;
  * @param {string} timezone - The timezone to load.
  * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
  */
-export function loadZones(url: string, timezone: string): Promise<any> | any;
+export function loadZones(url: string, _timezone: any): Promise<any> | any;
 /**
  * Get the moment date object for translating dates with timezones.
  * @param {string|Date} value - The value to convert into a moment date.

package/lib/mjs/utils/utils.js

@@ -217,6 +217,16 @@ export function checkSimpleConditional(component, condition, row, data, instance
             }
             else {
                 const value = getComponentActualValue(conditionComponentPath, data, row);
+                // When inside a DataGrid/EditGrid, construct a row-indexed path so that
+                // operators like isEmpty can look up the correct row's component instance.
+                let operatorPath = conditionComponentPath;
+                const dataParent = getDataParentComponent(instance);
+                if (dataParent && !_.isNil(instance?.rowIndex)) {
+                    const parentPath = dataParent.paths?.localPath;
+                    if (parentPath && conditionComponentPath.startsWith(`${parentPath}.`)) {
+                        operatorPath = conditionComponentPath.replace(`${parentPath}.`, `${parentPath}[${instance.rowIndex}].`);
+                    }
+                }
                 const СonditionOperator = ConditionOperators[operator];
                 return СonditionOperator
                     ? new СonditionOperator().getResult({
@@ -224,7 +234,7 @@ export function checkSimpleConditional(component, condition, row, data, instance
                         comparedValue,
                         instance,
                         component,
-                        path: conditionComponentPath,
+                        path: operatorPath,
                     })
                     : true;
             }
@@ -275,7 +285,11 @@ export function getComponentActualValue(compPath, data, row) {
  */
 export function checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {
     if (typeof custom === 'string') {
-        custom = `var ${variable} = true; ${custom}; return ${variable};`;
+        custom = `
+      var ${variable} = true; 
+      ${custom}; 
+      return ${variable};
+    `;
     }
     const value = instance && instance.evaluate
         ? instance.evaluate(custom, { row, data, form })
@@ -606,14 +620,16 @@ export function shouldLoadZones(timezone) {
  * @param {string} timezone - The timezone to load.
  * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
  */
-export function loadZones(url, timezone) {
-    if (timezone && !shouldLoadZones(timezone)) {
-        // Return non-resolving promise.
-        return new Promise(_.noop);
+export function loadZones(url, _timezone) {
+    if (moment.zonesLoaded) {
+        return Promise.resolve();
     }
     if (moment.zonesPromise) {
         return moment.zonesPromise;
     }
+    // Always load the full packed dataset once. The previous optimization skipped fetch when the
+    // display timezone matched the runtime zone, but moment-timezone still needs `tz.load()` for
+    // `.tz(ianaName)` and `z` formatting to work; otherwise conversions silently match server local time.
     return (moment.zonesPromise = fetch(url).then((resp) => resp.json().then((zones) => {
         moment.tz.load(zones);
         moment.zonesLoaded = true;

package/lib/mjs/widgets/CalendarWidget.js

@@ -1,6 +1,6 @@
 import { Formio } from '../Formio';
 import InputWidget from './InputWidget';
-import { convertFormatToFlatpickr, convertFormatToMask, convertFormatToMoment, formatDate, formatOffset, getBrowserInfo, getDateSetting, getLocaleDateFormatInfo, momentDate, zonesLoaded, shouldLoadZones, loadZones, hasEncodedTimezone, } from '../utils';
+import { convertFormatToFlatpickr, convertFormatToMask, convertFormatToMoment, formatDate, formatOffset, getBrowserInfo, getDateSetting, getLocaleDateFormatInfo, momentDate, zonesLoaded, loadZones, hasEncodedTimezone, } from '../utils';
 import moment from 'moment';
 import _ from 'lodash';
 const DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';
@@ -56,7 +56,7 @@ export default class CalendarWidget extends InputWidget {
         if (this.zoneLoading) {
             return true;
         }
-        if (!zonesLoaded() && shouldLoadZones(timezone)) {
+        if (!zonesLoaded()) {
             this.zoneLoading = true;
             loadZones(this.timezonesUrl, timezone).then(() => {
                 this.zoneLoading = false;