@formio/js 5.0.0-dev.5739.0b95c46 → 5.0.0-dev.5740.c7c00bc

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

@@ -685,7 +685,7 @@ class NestedComponent extends Field_1.default {
     validationProcessor({ scope, data, row, instance, component }, flags) {
         const { dirty } = flags;
         if (this.root.hasExtraPages && this.page !== this.root.page) {
-            instance = this.getComponentById(component.id);
+            instance = this.getComponent(component.path);
         }
         if (!instance) {
             return;

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

@@ -1,4 +1,8 @@
 import comp1 from './comp1';
+import comp10 from './comp10';
+import comp11 from './comp11';
+import comp12 from './comp12';
+import comp13 from './comp13';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp5 from './comp5';
@@ -6,9 +10,4 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-import comp10 from './comp10';
-import comp11 from './comp11';
-import comp12 from './comp12';
-import comp13 from './comp13';
-import comp14 from './comp14';
-export { comp1, comp2, comp3, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14 };
+export { comp1, comp10, comp11, comp12, comp13, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };

package/lib/cjs/components/datetime/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.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp3 = exports.comp2 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -28,5 +28,3 @@ const comp12_1 = __importDefault(require("./comp12"));
 exports.comp12 = comp12_1.default;
 const comp13_1 = __importDefault(require("./comp13"));
 exports.comp13 = comp13_1.default;
-const comp14_1 = __importDefault(require("./comp14"));
-exports.comp14 = comp14_1.default;

package/lib/cjs/widgets/CalendarWidget.js

@@ -101,10 +101,16 @@ class CalendarWidget extends InputWidget_1.default {
         this.settings.altFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.format);
         this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);
         this.settings.position = 'auto center';
-        // This is called when a date is picked in Flatpickrs calendar
         this.settings.onChange = () => {
-            // Because a date was picked using flatpickrs calendar we can be sure that we don't have a manually overridden value
-            this.settings.isManuallyOverriddenValue = false;
+            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');
         };
         this.settings.onOpen = () => this.hook('onCalendarOpen');
@@ -112,13 +118,9 @@ class CalendarWidget extends InputWidget_1.default {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                // We need to make sure that this block of code runs after Flatpickr sets the inputs value so that we can
-                // override the value Flatpickr sets with a manual value if we are in the state of manually overridden value
-                setTimeout(() => {
-                    this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
-                    this._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
-                    this.emit('update');
-                });
+                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;
@@ -270,7 +272,7 @@ class CalendarWidget extends InputWidget_1.default {
      */
     getValue() {
         // Standard output format.
-        if (!this.calendar || this.settings.isManuallyOverriddenValue) {
+        if (!this.calendar) {
             return super.getValue();
         }
         // Get the selected dates from the calendar widget.
@@ -355,24 +357,19 @@ class CalendarWidget extends InputWidget_1.default {
         // Create a new flatpickr.
         this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
-            // Need to give time for the input mask to update so that the manualInputValue can be properly set
-            setTimeout(() => {
-                if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
-                    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.settings.allowInput && this.settings.currentValue !== event.target.value) {
+                this.settings.manualInputValue = event.target.value;
+                this.settings.isManuallyOverriddenValue = true;
+                this.settings.currentValue = event.target.value;
+            }
+            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;
+            }
         });
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {
@@ -400,10 +397,6 @@ class CalendarWidget extends InputWidget_1.default {
         // Make sure we commit the value after a blur event occurs.
         this.addEventListener(this.calendar._input, 'blur', (event) => {
             var _a, _b, _c, _d;
-            // 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)) {

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

@@ -681,7 +681,7 @@ export default class NestedComponent extends Field {
     validationProcessor({ scope, data, row, instance, component }, flags) {
         const { dirty } = flags;
         if (this.root.hasExtraPages && this.page !== this.root.page) {
-            instance = this.getComponentById(component.id);
+            instance = this.getComponent(component.path);
         }
         if (!instance) {
             return;

package/lib/mjs/components/datetime/fixtures/index.d.ts

@@ -1,4 +1,8 @@
 import comp1 from './comp1';
+import comp10 from './comp10';
+import comp11 from './comp11';
+import comp12 from './comp12';
+import comp13 from './comp13';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp5 from './comp5';
@@ -6,9 +10,4 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-import comp10 from './comp10';
-import comp11 from './comp11';
-import comp12 from './comp12';
-import comp13 from './comp13';
-import comp14 from './comp14';
-export { comp1, comp2, comp3, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14 };
+export { comp1, comp10, comp11, comp12, comp13, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };

package/lib/mjs/components/datetime/fixtures/index.js

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

package/lib/mjs/widgets/CalendarWidget.js

@@ -95,10 +95,16 @@ export default class CalendarWidget extends InputWidget {
         this.settings.altFormat = convertFormatToFlatpickr(this.settings.format);
         this.settings.dateFormat = convertFormatToFlatpickr(this.settings.dateFormat);
         this.settings.position = 'auto center';
-        // This is called when a date is picked in Flatpickrs calendar
         this.settings.onChange = () => {
-            // Because a date was picked using flatpickrs calendar we can be sure that we don't have a manually overridden value
-            this.settings.isManuallyOverriddenValue = false;
+            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');
         };
         this.settings.onOpen = () => this.hook('onCalendarOpen');
@@ -106,13 +112,9 @@ export default class CalendarWidget extends InputWidget {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                // We need to make sure that this block of code runs after Flatpickr sets the inputs value so that we can
-                // override the value Flatpickr sets with a manual value if we are in the state of manually overridden value
-                setTimeout(() => {
-                    this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
-                    this._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
-                    this.emit('update');
-                });
+                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;
@@ -262,7 +264,7 @@ export default class CalendarWidget extends InputWidget {
      */
     getValue() {
         // Standard output format.
-        if (!this.calendar || this.settings.isManuallyOverriddenValue) {
+        if (!this.calendar) {
             return super.getValue();
         }
         // Get the selected dates from the calendar widget.
@@ -346,24 +348,19 @@ export default class CalendarWidget extends InputWidget {
         // Create a new flatpickr.
         this.calendar = new Flatpickr(this._input, { ...this.settings, disableMobile: true });
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
-            // Need to give time for the input mask to update so that the manualInputValue can be properly set
-            setTimeout(() => {
-                if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
-                    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.settings.allowInput && this.settings.currentValue !== event.target.value) {
+                this.settings.manualInputValue = event.target.value;
+                this.settings.isManuallyOverriddenValue = true;
+                this.settings.currentValue = event.target.value;
+            }
+            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;
+            }
         });
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !_.some(excludedFromMaskFormats, format => _.includes(this.settings.format, format))) {
@@ -390,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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5739.0b95c46",
+  "version": "5.0.0-dev.5740.c7c00bc",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {

package/lib/cjs/components/datetime/fixtures/comp14.d.ts

@@ -1,35 +0,0 @@
-declare namespace _default {
-    let components: {
-        label: string;
-        tableView: boolean;
-        datePicker: {
-            disableWeekends: boolean;
-            disableWeekdays: boolean;
-        };
-        enableMinDateInput: boolean;
-        enableMaxDateInput: boolean;
-        validateWhenHidden: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        widget: {
-            type: string;
-            displayInTimezone: string;
-            locale: string;
-            useLocaleSettings: boolean;
-            allowInput: boolean;
-            mode: string;
-            enableTime: boolean;
-            noCalendar: boolean;
-            format: string;
-            hourIncrement: number;
-            minuteIncrement: number;
-            time_24hr: boolean;
-            minDate: null;
-            disableWeekends: boolean;
-            disableWeekdays: boolean;
-            maxDate: null;
-        };
-    }[];
-}
-export default _default;

package/lib/cjs/components/datetime/fixtures/comp14.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    components: [
-        {
-            "label": "Date / Time",
-            "tableView": false,
-            "datePicker": {
-                "disableWeekends": false,
-                "disableWeekdays": false
-            },
-            "enableMinDateInput": false,
-            "enableMaxDateInput": false,
-            "validateWhenHidden": false,
-            "key": "dateTime",
-            "type": "datetime",
-            "input": true,
-            "widget": {
-                "type": "calendar",
-                "displayInTimezone": "viewer",
-                "locale": "en",
-                "useLocaleSettings": false,
-                "allowInput": true,
-                "mode": "single",
-                "enableTime": true,
-                "noCalendar": false,
-                "format": "yyyy-MM-dd hh:mm a",
-                "hourIncrement": 1,
-                "minuteIncrement": 1,
-                "time_24hr": false,
-                "minDate": null,
-                "disableWeekends": false,
-                "disableWeekdays": false,
-                "maxDate": null
-            }
-        }
-    ]
-};

package/lib/mjs/components/datetime/fixtures/comp14.d.ts

@@ -1,35 +0,0 @@
-declare namespace _default {
-    let components: {
-        label: string;
-        tableView: boolean;
-        datePicker: {
-            disableWeekends: boolean;
-            disableWeekdays: boolean;
-        };
-        enableMinDateInput: boolean;
-        enableMaxDateInput: boolean;
-        validateWhenHidden: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        widget: {
-            type: string;
-            displayInTimezone: string;
-            locale: string;
-            useLocaleSettings: boolean;
-            allowInput: boolean;
-            mode: string;
-            enableTime: boolean;
-            noCalendar: boolean;
-            format: string;
-            hourIncrement: number;
-            minuteIncrement: number;
-            time_24hr: boolean;
-            minDate: null;
-            disableWeekends: boolean;
-            disableWeekdays: boolean;
-            maxDate: null;
-        };
-    }[];
-}
-export default _default;

package/lib/mjs/components/datetime/fixtures/comp14.js

@@ -1,36 +0,0 @@
-export default {
-    components: [
-        {
-            "label": "Date / Time",
-            "tableView": false,
-            "datePicker": {
-                "disableWeekends": false,
-                "disableWeekdays": false
-            },
-            "enableMinDateInput": false,
-            "enableMaxDateInput": false,
-            "validateWhenHidden": false,
-            "key": "dateTime",
-            "type": "datetime",
-            "input": true,
-            "widget": {
-                "type": "calendar",
-                "displayInTimezone": "viewer",
-                "locale": "en",
-                "useLocaleSettings": false,
-                "allowInput": true,
-                "mode": "single",
-                "enableTime": true,
-                "noCalendar": false,
-                "format": "yyyy-MM-dd hh:mm a",
-                "hourIncrement": 1,
-                "minuteIncrement": 1,
-                "time_24hr": false,
-                "minDate": null,
-                "disableWeekends": false,
-                "disableWeekdays": false,
-                "maxDate": null
-            }
-        }
-    ]
-};