@formio/js 5.1.0-dev.6002.16f1966 → 5.1.0-rc.10

package/lib/mjs/formio.form.js

@@ -12,7 +12,6 @@ import { Evaluator } from './utils/Evaluator';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
-import { I18n } from './utils/i18n';
 Formio.loadModules = (path = `${Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio.requireLibrary(name, name, path, true)
         .then((modules) => {
@@ -57,7 +56,6 @@ export function registerModule(mod, defaultFn = null, options = {}) {
             case 'templates':
                 for (const framework of Object.keys(mod.templates)) {
                     Formio.Templates.extendTemplate(framework, mod.templates[framework]);
-                    Formio.Templates.defaultTemplates = _.defaults(mod.templates[framework], Formio.Templates.defaultTemplates);
                 }
                 if (mod.templates[current]) {
                     Formio.Templates.current = mod.templates[current];
@@ -85,9 +83,6 @@ export function registerModule(mod, defaultFn = null, options = {}) {
             case 'evaluator':
                 Formio.Evaluator.registerEvaluator(mod.evaluator);
                 break;
-            case 'translations':
-                I18n.setDefaultTranslations(mod.translations);
-                break;
             case 'library':
                 options.license
                     ? Formio.Licenses.addLicense(mod.library, options.license)

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

@@ -50,11 +50,10 @@ function googledrive(formio) {
                 xhr.send(fd);
             }));
         },
-        downloadFile(file, component) {
+        downloadFile(file) {
             const token = formio.getToken();
-            // Constructed the url with the fileId, fileName, displayImage, imageSize if applicable
             file.url =
-                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}${component.image ? '&displayImage=true' : ''}${component.imageSize ? `&imageSize=${component.imageSize}` : ''}`;
+                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}`;
             return Promise.resolve(file);
         },
         deleteFile: function deleteFile(fileInfo) {

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

@@ -1,235 +1,82 @@
-declare const _default: {
-    unsavedRowsError: string;
-    invalidRowsError: string;
-    invalidRowError: string;
-    invalidOption: string;
-    invalidDay: string;
-    alertMessageWithLabel: string;
-    alertMessage: string;
-    complete: string;
-    error: string;
-    errorListHotkey: string;
-    errorsListNavigationMessage: string;
-    submitError: string;
-    required: string;
-    unique: string;
-    array: string;
-    array_nonempty: string;
-    nonarray: string;
-    select: string;
-    pattern: string;
-    minLength: string;
-    maxLength: string;
-    minWords: string;
-    maxWords: string;
-    min: string;
-    max: string;
-    maxDate: string;
-    minDate: string;
-    maxYear: string;
-    minYear: string;
-    minSelectedCount: string;
-    maxSelectedCount: string;
-    invalid_email: string;
-    invalid_url: string;
-    invalid_regex: string;
-    invalid_date: string;
-    invalid_day: string;
-    invalidValueProperty: string;
-    mask: string;
-    valueIsNotAvailable: string;
-    stripe: string;
-    month: string;
-    day: string;
-    year: string;
-    january: string;
-    february: string;
-    march: string;
-    april: string;
-    may: string;
-    june: string;
-    july: string;
-    august: string;
-    september: string;
-    october: string;
-    november: string;
-    december: string;
-    next: string;
-    previous: string;
-    cancel: string;
-    submit: string;
-    confirmCancel: string;
-    saveDraftInstanceError: string;
-    saveDraftAuthError: string;
-    restoreDraftInstanceError: string;
-    saveDraftError: string;
-    restoreDraftError: string;
-    time: string;
-    cancelButtonAriaLabel: string;
-    previousButtonAriaLabel: string;
-    nextButtonAriaLabel: string;
-    submitButtonAriaLabel: string;
-    reCaptchaTokenValidationError: string;
-    reCaptchaTokenNotSpecifiedError: string;
-    apiKey: string;
-    typeRemaining: string;
-    typeCount: string;
-    requiredDayField: string;
-    requiredDayEmpty: string;
-    requiredMonthField: string;
-    requiredYearField: string;
-    formNotReady: string;
-    noFormElement: string;
-    notUniqueKey: string;
-    newFormSchema: string;
-    missingUrl: string;
-    urlNotAttachedToBtn: string;
-    loadingProjectSettingsError: string;
-    sessionStorageSupportError: string;
-    builderUniqueError: string;
-    pageNotFound: string;
-    noDragInfoError: string;
-    addonSupportTypeError: string;
-    setPathError: string;
-    calculatedPathDeprecation: string;
-    unknownTemplate: string;
-    unknownComponent: string;
-    renderTemplateFunctionDeprecation: string;
-    whenReadyDeprecation: string;
-    loadResourcesError: string;
-    noSelectDataConfiguration: string;
-    indexedDBSupportError: string;
-    caretPositionSavingError: string;
-    iteratableRowsError: string;
-    checkRowDeprecation: string;
-    noOAuthBtn: string;
-    noOAuthConfiguration: string;
-    oAuthErrorsTitle: string;
-    noOAuthFormUrl: string;
-    oAuthStateError: string;
-    componentInvalidRowValidation: string;
-    videoPlayerNotFound: string;
-    synchronizationFailed: string;
-    fileWithDuplicatedNameInProgress: string;
-    fileWithDuplicatedNameLoaded: string;
-    nestedForm: string;
-    noDataProvided: string;
-    subformSubmissionLoadingError: string;
-    noDelimiterSet: string;
-    noSiteKey: string;
-    failedToNormalize: string;
-    failedToCompareItems: string;
-    editorFocusError: string;
-    quillImageUploadFailed: string;
-    noFilesSelected: string;
-    needConfigurationForQuill: string;
-    waitPdfConverting: string;
-    uploading: string;
-    pasteBelow: string;
-    copy: string;
-    move: string;
-    edit: string;
-    editJson: string;
-    remove: string;
-    clickToSetValue: string;
-    words: string;
-    characters: string;
-    addAnother: string;
-    yes: string;
-    no: string;
-    wantToClearData: string;
-    yesDelete: string;
-    waitFileProcessing: string;
-    wrongFileType: string;
-    fileTooSmall: string;
-    fileTooBig: string;
-    noFileService: string;
-    fileProcessingFailed: string;
-    readyForUpload: string;
-    readyForRemovingFromStorage: string;
-    preparingFileToRemove: string;
-    succefullyRemoved: string;
-    succefullyUploaded: string;
-    maxSelectItems: string;
-    minSelectItems: string;
-    clickToSign: string;
-    surveyQuestion: string;
-    surveyQuestionValue: string;
-    success: string;
-    noResultsFound: string;
-    noChoices: string;
-    typeToSearch: string;
-    loading: string;
-    help: string;
-    component: string;
-    save: string;
-    preview: string;
-    dragAndDropComponent: string;
-    searchFields: string;
-    noMatchesFound: string;
-    fileName: string;
-    size: string;
-    type: string;
-    gallery: string;
-    camera: string;
-    dropFilesToAttach: string;
-    useCamera: string;
-    browse: string;
-    takePicture: string;
-    switchToFileUpload: string;
-    completeStatus: string;
-    noStorageSet: string;
-    noFileApiSupport: string;
-    noFormDataSupport: string;
-    noProgressSupport: string;
-    close: string;
-    addResource: string;
-    autocomplete: string;
-    showPreview: string;
-    hidePreview: string;
-    createPage: string;
-    page: string;
-    closeBtnDescription: string;
-    cancelBtnDescription: string;
-    saveBtnDescription: string;
-    addOrRemove: string;
-    anyFileTypesAllowed: string;
-    allowedFileTypes: string;
-    syncing: string;
-    syncNow: string;
-    pressToOpen: string;
-    browseToAttachFileFor: string;
-    or: string;
-    numericOnly: string;
-    uploadPdfFile: string;
-    dropToStart: string;
-    expand: string;
-    collapse: string;
-    add: string;
-    delete: string;
-    revert: string;
-    removeBtnPressToRemove: string;
-    file: string;
-    captureVideo: string;
-    captureAudio: string;
-    captureImage: string;
-    browseFiles: string;
-    noComponentsSetInGrid: string;
-    sortAscending: string;
-    sortDescending: string;
-    filter: string;
-    clear: string;
-    showItemsWithValue: string;
-    gridItemsPerPage: string;
-    gridAllItems: string;
-    recordsSelectedOnPage: string;
-    recordsSelectedInTable: string;
-    gridSelectAll: string;
-    itemsInTable: string;
-    clearSelection: string;
-    editGridRow: string;
-    deleteGridRow: string;
-    selected: string;
-    actions: string;
-};
+declare namespace _default {
+    let unsavedRowsError: string;
+    let invalidRowsError: string;
+    let invalidRowError: string;
+    let invalidOption: string;
+    let invalidDay: string;
+    let alertMessageWithLabel: string;
+    let alertMessage: string;
+    let complete: string;
+    let error: string;
+    let errorListHotkey: string;
+    let errorsListNavigationMessage: string;
+    let submitError: string;
+    let required: string;
+    let unique: string;
+    let array: string;
+    let array_nonempty: string;
+    let nonarray: string;
+    let select: string;
+    let pattern: string;
+    let minLength: string;
+    let maxLength: string;
+    let minWords: string;
+    let maxWords: string;
+    let min: string;
+    let max: string;
+    let maxDate: string;
+    let minDate: string;
+    let maxYear: string;
+    let minYear: string;
+    let minSelectedCount: string;
+    let maxSelectedCount: string;
+    let invalid_email: string;
+    let invalid_url: string;
+    let invalid_regex: string;
+    let invalid_date: string;
+    let invalid_day: string;
+    let invalidValueProperty: string;
+    let mask: string;
+    let valueIsNotAvailable: string;
+    let stripe: string;
+    let month: string;
+    let day: string;
+    let year: string;
+    let january: string;
+    let february: string;
+    let march: string;
+    let april: string;
+    let may: string;
+    let june: string;
+    let july: string;
+    let august: string;
+    let september: string;
+    let october: string;
+    let november: string;
+    let december: string;
+    let next: string;
+    let previous: string;
+    let cancel: string;
+    let submit: string;
+    let confirmCancel: string;
+    let saveDraftInstanceError: string;
+    let saveDraftAuthError: string;
+    let restoreDraftInstanceError: string;
+    let saveDraftError: string;
+    let restoreDraftError: string;
+    let time: string;
+    let cancelButtonAriaLabel: string;
+    let previousButtonAriaLabel: string;
+    let nextButtonAriaLabel: string;
+    let submitButtonAriaLabel: string;
+    let reCaptchaTokenValidationError: string;
+    let reCaptchaTokenNotSpecifiedError: string;
+    let apiKey: string;
+    let typeRemaining: string;
+    let typeCount: string;
+    let requiredDayField: string;
+    let requiredDayEmpty: string;
+    let requiredMonthField: string;
+    let requiredYearField: string;
+}
 export default _default;

package/lib/mjs/translations/en.js

@@ -1,6 +1,4 @@
-import bootstrap from '@formio/bootstrap';
 export default {
-    ...(bootstrap?.translations?.en || {}),
     unsavedRowsError: 'Please save all rows before proceeding.',
     invalidRowsError: 'Please correct invalid rows before proceeding.',
     invalidRowError: 'Invalid row. Please correct it or delete.',
@@ -79,89 +77,5 @@ export default {
     requiredDayField: '{{ field }} is required',
     requiredDayEmpty: '{{ field }} is required',
     requiredMonthField: '{{ field }} is required',
-    requiredYearField: '{{ field }} is required',
-    formNotReady: 'Form not ready. Use form.ready promise',
-    noFormElement: 'No DOM element for form.',
-    notUniqueKey: 'API Key is not unique',
-    newFormSchema: 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.',
-    missingUrl: 'Missing URL argument',
-    urlNotAttachedToBtn: 'You should add a URL to this button.',
-    loadingProjectSettingsError: 'Could not load project settings',
-    sessionStorageSupportError: 'Session storage is not supported in this browser.',
-    builderUniqueError: `You cannot add more than one {{componentKeyOrTitle}} component to one page.`,
-    pageNotFound: 'Page not found',
-    noDragInfoError: 'There is no Drag Info available for either dragged or sibling element',
-    addonSupportTypeError: 'Addon {{label}} does not support component of type {{type}}',
-    setPathError: 'Should not be setting the path of a component.',
-    calculatedPathDeprecation: 'component.calculatedPath was deprecated, use component.path instead.',
-    unknownTemplate: 'Unknown template: {{name}}',
-    unknownComponent: 'Unknown component: {{type}}',
-    renderTemplateFunctionDeprecation: `Form.io 'render' template function is deprecated.
-    If you need to render template (template A) inside of another template (template B),
-    pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`,
-    whenReadyDeprecation: 'The whenReady() method has been deprecated. Please use the dataReady property instead.',
-    loadResourcesError: 'Unable to load resources for {{componentKey}}',
-    noSelectDataConfiguration: 'Select component {{componentKey}} does not have data configuration.',
-    indexedDBSupportError: "Your browser doesn't support current version of indexedDB",
-    caretPositionSavingError: 'An error occurred while trying to save caret position',
-    iteratableRowsError: 'Getter #iteratableRows() is not implemented',
-    checkRowDeprecation: 'Deprecation Warning: checkRow method has been replaced with processRow',
-    noOAuthBtn: 'You must add the OAuth button to a form for it to function properly',
-    noOAuthConfiguration: 'OAuth not configured. You must configure oauth for your project before it will work.',
-    oAuthErrorsTitle: 'The Following Error Has Occured',
-    noOAuthFormUrl: 'You must attach a Form API url to your form in order to use OAuth buttons.',
-    oAuthStateError: 'OAuth state does not match. Please try logging in again.',
-    componentInvalidRowValidation: 'Invalid row validation for {{componentKey}}',
-    videoPlayerNotFound: 'Video player not found in template.',
-    synchronizationFailed: 'Synchronization is failed',
-    fileWithDuplicatedNameInProgress: 'File with the same name is already being uploaded',
-    fileWithDuplicatedNameLoaded: 'File with the same name is already uploaded',
-    nestedForm: 'Nested form',
-    noDataProvided: 'No data provided',
-    subformSubmissionLoadingError: 'Unable to load subform submission {{submissionId}}:',
-    noDelimiterSet: 'In order for thousands separator to work properly, you must set the delimiter to true in the component json',
-    noSiteKey: 'There is no Site Key specified in settings in form JSON',
-    failedToNormalize: 'Failed to normalize value',
-    failedToCompareItems: 'Error while comparing items',
-    editorFocusError: 'An editor did not initialize properly when trying to focus:',
-    quillImageUploadFailed: 'Quill image upload failed',
-    noFilesSelected: 'No files selected',
-    needConfigurationForQuill: 'The WYSIWYG settings are configured for CKEditor. For this renderer, you will need to use configurations for the Quill Editor. See https://quilljs.com/docs/configuration for more information.',
-    waitPdfConverting: 'Converting PDF. Please wait.',
-    uploading: 'Uploading',
-    pasteBelow: 'Paste below',
-    copy: 'Copy',
-    move: 'Move',
-    edit: 'Edit',
-    editJson: 'Edit JSON',
-    remove: 'Remove',
-    clickToSetValue: 'Click to set value',
-    words: 'words',
-    characters: 'characters',
-    addAnother: 'Add Another',
-    yes: 'Yes',
-    no: 'No',
-    wantToClearData: 'Do you want to clear data?',
-    yesDelete: 'Yes, delete it',
-    waitFileProcessing: 'Processing file. Please wait...',
-    wrongFileType: 'File is the wrong type; it must be {{ pattern }}',
-    fileTooSmall: 'File is too small; it must be at least {{ size }}',
-    fileTooBig: 'File is too big; it must be at most {{ size }}',
-    noFileService: 'File Service not provided.',
-    fileProcessingFailed: 'File processing has been failed.',
-    readyForUpload: 'Ready to be uploaded into storage',
-    readyForRemovingFromStorage: 'Ready to be removed from storage',
-    preparingFileToRemove: 'Preparing file to remove',
-    succefullyRemoved: 'Succefully removed',
-    succefullyUploaded: 'Succefully uploaded',
-    maxSelectItems: 'You may only select up to {{maxCount}} items',
-    minSelectItems: 'You must select at least {{minCount}} items',
-    clickToSign: 'Click to Sign',
-    surveyQuestion: 'Question',
-    surveyQuestionValue: 'Value',
-    success: 'Success',
-    noResultsFound: 'No results found',
-    noChoices: 'No choices to choose from',
-    typeToSearch: 'Type to search',
-    loading: 'Loading',
+    requiredYearField: '{{ field }} is required'
 };

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

@@ -2,16 +2,13 @@
  * This file is used to mimic the i18n library interface.
  */
 export class I18n {
-    static languages: {};
-    static setDefaultTranslations(languages: any): void;
     static init(languages?: {}): I18n;
     static createInstance(): I18n;
     constructor(languages?: {});
-    languages: any;
-    defaultKeys: any;
+    languages: {};
     language: string;
     currentLanguage: any;
-    setLanguages(languages: any, noDefaultOverride: any): void;
+    setLanguages(languages: any): void;
     dir(lang?: string): "rtl" | "ltr";
     changeLanguage(language: any, ready?: null): void;
     addResourceBundle(language: any, type: any, strings: any): void;

package/lib/mjs/utils/i18n.js

@@ -1,7 +1,5 @@
 import { Evaluator } from '@formio/core/utils';
 import i18n from '../i18n';
-import { isEmpty } from 'lodash';
-import { fastCloneDeep } from '@formio/core';
 const i18Defaults = {};
 for (const lang in i18n.resources) {
     if (i18n.resources.hasOwnProperty(lang)) {
@@ -12,29 +10,14 @@ for (const lang in i18n.resources) {
  * This file is used to mimic the i18n library interface.
  */
 export class I18n {
-    static languages = i18Defaults;
-    languages = fastCloneDeep(I18n.languages || {});
-    defaultKeys = I18n.languages?.en || {};
+    languages = i18Defaults;
     language = 'en';
     currentLanguage = i18Defaults.en;
     constructor(languages = {}) {
         this.setLanguages(languages);
         this.changeLanguage(this.language);
     }
-    static setDefaultTranslations(languages) {
-        if (isEmpty(languages)) {
-            return;
-        }
-        for (const lang in languages) {
-            if (lang !== 'language' && languages.hasOwnProperty(lang)) {
-                if (!this.languages[lang]) {
-                    this.languages[lang] = {};
-                }
-                this.languages[lang] = { ...languages[lang], ...this.languages[lang], };
-            }
-        }
-    }
-    setLanguages(languages, noDefaultOverride) {
+    setLanguages(languages) {
         if (languages.resources) {
             for (const lang in languages.resources) {
                 if (languages.resources.hasOwnProperty(lang)) {
@@ -61,9 +44,7 @@ export class I18n {
                 if (!this.languages[lang]) {
                     this.languages[lang] = {};
                 }
-                this.languages[lang] = noDefaultOverride
-                    ? { ...languages[lang], ...this.languages[lang] }
-                    : { ...this.languages[lang], ...languages[lang] };
+                this.languages[lang] = { ...this.languages[lang], ...languages[lang] };
             }
         }
     }
@@ -92,20 +73,12 @@ export class I18n {
         this.languages[language] = strings;
     }
     t(text, ...args) {
-        let currentTranslation = this.currentLanguage[text];
-        // provide compatibility with cases where the entire phrase is used as a key
-        // get the phrase that is possibly being used as a key
-        const defaultKey = this.defaultKeys[text];
-        if (defaultKey && this.currentLanguage[defaultKey]) {
-            // get translation using the phrase as a key
-            currentTranslation = this.currentLanguage[defaultKey];
-        }
-        if (currentTranslation) {
+        if (this.currentLanguage[text]) {
             const customTranslationFieldName = args[0]?.field;
             if (customTranslationFieldName && this.currentLanguage[customTranslationFieldName]) {
                 args[0].field = this.currentLanguage[customTranslationFieldName];
             }
-            return Evaluator.interpolateString(currentTranslation, ...args);
+            return Evaluator.interpolateString(this.currentLanguage[text], ...args);
         }
         return Evaluator.interpolateString(text, ...args);
     }

package/lib/mjs/widgets/CalendarWidget.js

@@ -87,6 +87,8 @@ export default class CalendarWidget extends InputWidget {
         this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';
         this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';
         this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';
+        this.settings.wasDefaultValueChanged = false;
+        this.settings.defaultValue = '';
         this.settings.manualInputValue = '';
         this.settings.isManuallyOverriddenValue = false;
         this.settings.currentValue = '';
@@ -94,8 +96,14 @@ export default class CalendarWidget extends InputWidget {
         this.settings.dateFormat = convertFormatToFlatpickr(this.settings.dateFormat);
         this.settings.position = 'auto center';
         this.settings.onChange = () => {
-            if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+            if (this.settings.allowInput) {
+                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {
+                    this.calendar._input.value = this.settings.manualInputValue;
+                }
+                else {
+                    this.settings.manualInputValue = '';
+                }
+                this.settings.isManuallyOverriddenValue = false;
             }
             this.emit('update');
         };
@@ -104,15 +112,20 @@ export default class CalendarWidget extends InputWidget {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;
+                this.settings.isManuallyOverriddenValue = false;
                 this.emit('update');
             }
+            if (this.settings.wasDefaultValueChanged) {
+                this.calendar._input.value = this.settings.defaultValue;
+                this.settings.wasDefaultValueChanged = false;
+            }
             if (this.calendar) {
                 this.emit('blur');
             }
         };
         Formio.requireLibrary('flatpickr-css', 'flatpickr', [
-            { type: 'styles', src: `${Formio.cdn['flatpickr']}/flatpickr.min.css` }
+            { type: 'styles', src: `${Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }
         ], true);
         if (this.component.shortcutButtons) {
             this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);
@@ -129,7 +142,7 @@ export default class CalendarWidget extends InputWidget {
             }
         })
             .then((ShortcutButtonsPlugin) => {
-            return Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio.cdn['flatpickr']}/flatpickr.min.js`, true)
+            return Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)
                 .then((Flatpickr) => {
                 if (this.component.shortcutButtons?.length && ShortcutButtonsPlugin) {
                     this.initShortcutButtonsPlugin(ShortcutButtonsPlugin);
@@ -138,7 +151,7 @@ export default class CalendarWidget extends InputWidget {
                 if (this._input) {
                     const { locale } = this.settings;
                     if (locale && locale.length >= 2 && locale !== 'en') {
-                        return Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio.cdn['flatpickr']}/l10n/${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
+                        return Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
                     }
                     else {
                         this.initFlatpickr(Flatpickr);
@@ -336,28 +349,19 @@ export default class CalendarWidget extends InputWidget {
         this.calendar = new Flatpickr(this._input, { ...this.settings, disableMobile: true });
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
             if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
-                if (event.target.mask) {
-                    event.target.mask.textMaskInputElement.update();
-                }
                 this.settings.manualInputValue = event.target.value;
-                this._input.value = this.settings.manualInputValue;
                 this.settings.isManuallyOverriddenValue = true;
                 this.settings.currentValue = event.target.value;
-                this.emit('update');
+            }
+            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
+                this.settings.wasDefaultValueChanged = true;
+                this.settings.defaultValue = event.target.value;
+                this.calendar.clear();
+            }
+            else {
+                this.settings.wasDefaultValueChanged = false;
             }
         });
-        if (this.calendar.daysContainer) {
-            this.calendar.daysContainer.addEventListener('click', () => {
-                this.settings.isManuallyOverriddenValue = false;
-                this.calendar.updateValue(false);
-            });
-        }
-        if (this.calendar.timeContainer) {
-            this.calendar.timeContainer.addEventListener('click', () => {
-                this.settings.isManuallyOverriddenValue = false;
-                this.calendar.updateValue(false);
-            });
-        }
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !_.some(excludedFromMaskFormats, format => _.includes(this.settings.format, format))) {
             // Enforce the input mask of the format.
@@ -383,10 +387,6 @@ export default class CalendarWidget extends InputWidget {
         }
         // Make sure we commit the value after a blur event occurs.
         this.addEventListener(this.calendar._input, 'blur', (event) => {
-            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask
-            if (this.settings.isManuallyOverriddenValue) {
-                return;
-            }
             const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {