@formio/js 5.0.0-rc.18 → 5.0.0-rc.20

package/lib/mjs/Webform.js

@@ -4,7 +4,6 @@ import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
 import i18nDefaults from './i18n';
 import { Formio } from './Formio';
-import NativePromise from 'native-promise-only';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
 import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath } from './utils/utils';
@@ -68,42 +67,6 @@ export default class Webform extends NestedDataComponent {
         if (this.options.baseUrl) {
             Formio.setBaseUrl(this.options.baseUrl);
         }
-        /**
-         * The i18n configuration for this component.
-         */
-        let i18n = i18nDefaults;
-        if (options && options.i18n && !options.i18nReady) {
-            // Support legacy way of doing translations.
-            if (options.i18n.resources) {
-                i18n = options.i18n;
-            }
-            else {
-                _.each(options.i18n, (lang, code) => {
-                    if (code === 'options') {
-                        _.merge(i18n, lang);
-                    }
-                    else if (!i18n.resources[code]) {
-                        // extend the default translations (validations, buttons etc.) in case they are not in the options.
-                        i18n.resources[code] = { translation: _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang) };
-                    }
-                    else {
-                        _.assign(i18n.resources[code].translation, lang);
-                    }
-                });
-            }
-            options.i18n = i18n;
-            options.i18nReady = true;
-        }
-        if (options && options.i18n) {
-            this.options.i18n = options.i18n;
-        }
-        else {
-            this.options.i18n = i18n;
-        }
-        // Set the language.
-        if (this.options.language) {
-            this.options.i18n.lng = this.options.language;
-        }
         /**
          * The type of this element.
          * @type {string}
@@ -175,7 +138,7 @@ export default class Webform extends NestedDataComponent {
          * });
          * form.src = 'https://examples.form.io/example';
          */
-        this.formReady = new NativePromise((resolve, reject) => {
+        this.formReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
              *
@@ -201,7 +164,7 @@ export default class Webform extends NestedDataComponent {
          * });
          * form.src = 'https://examples.form.io/example/submission/234234234234234243';
          */
-        this.submissionReady = new NativePromise((resolve, reject) => {
+        this.submissionReady = new Promise((resolve, reject) => {
             /**
              * Called when the formReady state of this form has been resolved.
              *
@@ -217,9 +180,7 @@ export default class Webform extends NestedDataComponent {
         });
         this.shortcuts = [];
         // Set language after everything is established.
-        this.localize().then(() => {
-            this.language = this.options.language;
-        });
+        this.language = this.i18next.language;
         // See if we need to restore the draft from a user.
         if (this.options.saveDraft && !this.options.skipDraftRestore) {
             const user = Formio.getUser();
@@ -253,32 +214,17 @@ export default class Webform extends NestedDataComponent {
         if (!this.i18next) {
             return;
         }
-        let cleanupThis = this;
-        if (!cleanupThis) {
-            return;
-        }
-        cleanupThis.options.language = lang;
-        if (cleanupThis.i18next.language === lang) {
-            cleanupThis = null;
-            return;
-        }
-        try {
-            cleanupThis.i18next.changeLanguage(lang, (err) => {
-                if (err) {
-                    cleanupThis = null;
-                    return;
-                }
-                if (cleanupThis) {
-                    cleanupThis.rebuild();
-                    cleanupThis.emit('languageChanged');
-                    cleanupThis = null;
-                }
-            });
-        }
-        catch (err) {
-            cleanupThis = null;
+        this.options.language = lang;
+        if (this.i18next.language === lang) {
             return;
         }
+        this.i18next.changeLanguage(lang, (err) => {
+            if (err) {
+                return;
+            }
+            this.rebuild();
+            this.emit('languageChanged');
+        });
     }
     get componentComponents() {
         return this.form.components;
@@ -303,48 +249,6 @@ export default class Webform extends NestedDataComponent {
             }
         }
     }
-    /**
-     * Perform the localization initialization.
-     * @returns {*}
-     */
-    localize() {
-        if (!this.i18next) {
-            return NativePromise.resolve(null);
-        }
-        if (this.i18next.initialized) {
-            return NativePromise.resolve(this.i18next);
-        }
-        this.i18next.initialized = true;
-        let cleanupThis = this;
-        return new NativePromise((resolve, reject) => {
-            try {
-                if (!cleanupThis) {
-                    return;
-                }
-                cleanupThis.i18next.init({
-                    ...cleanupThis.options.i18n,
-                    ...{ compatibilityJSON: 'v3' }
-                }, (err) => {
-                    if (!cleanupThis) {
-                        reject(new Error('Lost reference to `this` while initializing i18next.'));
-                    }
-                    // Get language but remove any ;q=1 that might exist on it.
-                    cleanupThis.options.language = cleanupThis.i18next.language.split(';')[0];
-                    if (err) {
-                        cleanupThis = null;
-                        return reject(err);
-                    }
-                    const i18next = cleanupThis.i18next;
-                    cleanupThis = null;
-                    resolve(i18next);
-                });
-            }
-            catch (err) {
-                cleanupThis = null;
-                return reject(err);
-            }
-        });
-    }
     keyboardCatchableElement(element) {
         if (element.nodeName === 'TEXTAREA') {
             return false;
@@ -456,7 +360,7 @@ export default class Webform extends NestedDataComponent {
                 this.formReadyReject(err);
             });
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     /**
      * Set the Form source, which is typically the Form.io embed URL.
@@ -605,7 +509,7 @@ export default class Webform extends NestedDataComponent {
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
-                return NativePromise.resolve();
+                return Promise.resolve();
             }
             // Create the form.
             this._form = flags?.keepAsReference ? form : _.cloneDeep(form);
@@ -613,13 +517,13 @@ export default class Webform extends NestedDataComponent {
                 this.onSetForm(_.cloneDeep(this._form), form);
             }
             if (this.parent?.component?.modalEdit) {
-                return NativePromise.resolve();
+                return Promise.resolve();
             }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         // Allow the form to provide component overrides.
         if (form && form.settings && form.settings.components) {
@@ -656,7 +560,7 @@ export default class Webform extends NestedDataComponent {
             }
         }
         this.initialized = false;
-        const rebuild = this.rebuild() || NativePromise.resolve();
+        const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
             this.emit('formLoad', form);
             this.triggerRecaptcha();
@@ -815,7 +719,10 @@ export default class Webform extends NestedDataComponent {
     }
     setValue(submission, flags = {}) {
         if (!submission || !submission.data) {
-            submission = { data: {} };
+            submission = {
+                data: {},
+                metadata: submission.metadata,
+            };
         }
         // Metadata needs to be available before setValue
         this._submission.metadata = submission.metadata || {};
@@ -849,7 +756,14 @@ export default class Webform extends NestedDataComponent {
      * Build the form.
      */
     init() {
-        this._submission = this._submission || { data: {} };
+        if (this.options.submission) {
+            const submission = _.extend({}, this.options.submission);
+            this._submission = submission;
+            this._data = submission.data;
+        }
+        else {
+            this._submission = this._submission || { data: {} };
+        }
         // Remove any existing components.
         if (this.components && this.components.length) {
             this.destroyComponents();
@@ -930,7 +844,7 @@ export default class Webform extends NestedDataComponent {
     redraw() {
         // Don't bother if we have not built yet.
         if (!this.element) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         this.clear();
         this.setContent(this.element, this.render());
@@ -1303,7 +1217,7 @@ export default class Webform extends NestedDataComponent {
     }
     submitForm(options = {}) {
         this.clearServerErrors();
-        return new NativePromise((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
             if (this.options.readOnly) {
                 return resolve({
@@ -1327,6 +1241,9 @@ export default class Webform extends NestedDataComponent {
                     return reject();
                 }
                 this.everyComponent((comp) => {
+                    if (submission._vnote && comp.type === 'form' && comp.component.reference) {
+                        _.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                    }
                     const { persistent } = comp.component;
                     if (persistent === 'client-only') {
                         _.unset(submission.data, comp.path);
@@ -1404,7 +1321,7 @@ export default class Webform extends NestedDataComponent {
         })
             .catch((err) => {
             this.submissionInProcess = false;
-            return NativePromise.reject(this.onSubmissionError(err));
+            return Promise.reject(this.onSubmissionError(err));
         });
     }
     clearServerErrors() {
@@ -1470,10 +1387,11 @@ export default class Webform extends NestedDataComponent {
                 this.emit('requestDone');
                 this.setAlert('success', '<p> Success </p>');
             }).catch((e) => {
-                this.showErrors(`${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`);
-                this.emit('error', `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`);
-                console.error(`${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`);
-                this.setAlert('danger', `<p> ${e.statusText ? e.statusText : ''} ${e.status ? e.status : e} </p>`);
+                const message = `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`;
+                this.emit('error', message);
+                console.error(message);
+                this.setAlert('danger', `<p> ${message} </p>`);
+                return Promise.reject(this.onSubmissionError(e));
             });
         }
         else {

package/lib/mjs/WebformBuilder.d.ts

@@ -49,6 +49,7 @@ export default class WebformBuilder extends Component {
             weight: number;
         };
     };
+    redraw(): Promise<void> | Promise<boolean>;
     set form(arg: any);
     get form(): any;
     get container(): any;
@@ -60,6 +61,7 @@ export default class WebformBuilder extends Component {
     findNamespaceRoot(component: any): any;
     recurseNamespace(component: any): any;
     render(): any;
+    attach(element: any): Promise<any>;
     searchFields(searchString?: string): void;
     orderComponents(groupInfo: any, foundComponents: any): void;
     updateDragAndDrop(): any;
@@ -86,6 +88,9 @@ export default class WebformBuilder extends Component {
     saveComponent(component: any, parent: any, isNew: any, original: any): boolean;
     isComponentCreated: boolean | undefined;
     emitSaveComponentEvent(schema: any, originalComp: any, parentComponentSchema: any, path: any, index: any, isNew: any, originalComponentSchema: any): void;
+    attachEditComponentControls(component: any, parent: any, isNew: any, original: any, ComponentClass: any): void;
+    saved: boolean | undefined;
+    showPreview: any;
     editComponent(component: any, parent: any, isNew: any, isJsonEdit: any, original: any, flags?: {}): void;
     editForm: Webform | undefined;
     preview: Webform | null | undefined;
@@ -93,7 +98,7 @@ export default class WebformBuilder extends Component {
     dialog: any;
     updateComponentKey(data: any): any;
     moveComponent(component: any): void;
-    selectedElement: any;
+    selectedComponent: any;
     moveHandler: (e: any) => void;
     updateComponentPlacement(direction: any): void;
     stopMoving(comp: any): void;

package/lib/mjs/WebformBuilder.js

@@ -1,7 +1,6 @@
 import Webform from './Webform';
 import Component from './components/_classes/component/Component';
 import tippy from 'tippy.js';
-import NativePromise from 'native-promise-only';
 import Components from './components/Components';
 import { Formio } from './Formio';
 import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath } from './utils/utils';
@@ -305,6 +304,9 @@ export default class WebformBuilder extends Component {
         });
     }
     attachComponent(element, component) {
+        if (component instanceof WebformBuilder) {
+            return;
+        }
         // Add component to element for later reference.
         element.formioComponent = component;
         component.loadRefs(element, {
@@ -571,7 +573,7 @@ export default class WebformBuilder extends Component {
             const { subgroups = [], components } = result;
             const filteredComponents = [];
             for (const key in components) {
-                const isMatchedToTitle = components[key].title.toLowerCase().match(searchValue);
+                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);
                 const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);
                 if (isMatchedToTitle || isMatchedToKey) {
                     filteredComponents.push(components[key]);
@@ -689,8 +691,17 @@ export default class WebformBuilder extends Component {
     }
     getComponentInfo(key, group) {
         let info;
+        // Need to check in first order as resource component key can be the same as from webform default components
+        if (group && group.slice(0, group.indexOf('-')) === 'resource') {
+            // This is an existing resource field.
+            const resourceGroups = this.groups.resource.subgroups;
+            const resourceGroup = _.find(resourceGroups, { key: group });
+            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {
+                info = fastCloneDeep(resourceGroup.components[`component-${key}`].schema);
+            }
+        }
         // This is a new component
-        if (this.schemas.hasOwnProperty(key)) {
+        else if (this.schemas.hasOwnProperty(key)) {
             info = fastCloneDeep(this.schemas[key]);
         }
         else if (this.groups.hasOwnProperty(group)) {
@@ -699,14 +710,6 @@ export default class WebformBuilder extends Component {
                 info = fastCloneDeep(groupComponents[key].schema);
             }
         }
-        else if (group.slice(0, group.indexOf('-')) === 'resource') {
-            // This is an existing resource field.
-            const resourceGroups = this.groups.resource.subgroups;
-            const resourceGroup = _.find(resourceGroups, { key: group });
-            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {
-                info = fastCloneDeep(resourceGroup.components[`component-${key}`].schema);
-            }
-        }
         else if (group === 'searchFields') { //Search components go into this group
             const resourceGroups = this.groups.resource.subgroups;
             for (let ix = 0; ix < resourceGroups.length; ix++) {
@@ -853,7 +856,7 @@ export default class WebformBuilder extends Component {
             rebuild = target.formioComponent.rebuild();
         }
         if (!rebuild) {
-            rebuild = NativePromise.resolve();
+            rebuild = Promise.resolve();
         }
         return rebuild.then(() => {
             this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);
@@ -871,7 +874,7 @@ export default class WebformBuilder extends Component {
         }
         this.keyboardActionsEnabled = _.get(this.options, 'keyboardBuilder', false) || this.options.properties?.keyboardBuilder;
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
-            && !form.components.length;
+            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
         // Ensure there is at least a submit button.
         if (isShowSubmitButton) {
             form.components.push({
@@ -898,7 +901,7 @@ export default class WebformBuilder extends Component {
                 return this.rebuild().then(() => this.form);
             });
         }
-        return NativePromise.resolve(form);
+        return Promise.resolve(form);
     }
     populateRecaptchaSettings(form) {
         //populate isEnabled for recaptcha form settings
@@ -947,7 +950,7 @@ export default class WebformBuilder extends Component {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            const rebuild = parent.formioComponent.rebuild() || NativePromise.resolve();
+            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {
                 this.emit('removeComponent', component, parent.formioComponent.schema, path, index);
                 this.emit('change', this.form);
@@ -996,6 +999,9 @@ export default class WebformBuilder extends Component {
                 _.assign(defaultValueComponent.component, _.omit({ ...component }, [
                     'key',
                     'label',
+                    'labelPosition',
+                    'labelMargin',
+                    'labelWidth',
                     'placeholder',
                     'tooltip',
                     'hidden',
@@ -1124,7 +1130,7 @@ export default class WebformBuilder extends Component {
             else if (isParentSaveChildMethod) {
                 parent.formioComponent.saveChildComponent(submissionData);
             }
-            const rebuild = parentComponent.rebuild() || NativePromise.resolve();
+            const rebuild = parentComponent.rebuild() || Promise.resolve();
             return rebuild.then(() => {
                 const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);
                 this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);
@@ -1138,16 +1144,70 @@ export default class WebformBuilder extends Component {
             });
         }
         this.highlightInvalidComponents();
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {
         this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);
     }
+    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {
+        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
+        cancelButtons.forEach((cancelButton) => {
+            this.editForm.addEventListener(cancelButton, 'click', (event) => {
+                event.preventDefault();
+                this.editForm.detach();
+                this.emit('cancelComponent', component);
+                this.dialog.close();
+                this.highlightInvalidComponents();
+            });
+        });
+        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
+        removeButtons.forEach((removeButton) => {
+            this.editForm.addEventListener(removeButton, 'click', (event) => {
+                event.preventDefault();
+                // Since we are already removing the component, don't trigger another remove.
+                this.saved = true;
+                this.editForm.detach();
+                this.removeComponent(component, parent, original);
+                this.dialog.close();
+                this.highlightInvalidComponents();
+            });
+        });
+        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
+        saveButtons.forEach((saveButton) => {
+            this.editForm.addEventListener(saveButton, 'click', (event) => {
+                event.preventDefault();
+                if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
+                    this.editForm.setPristine(false);
+                    this.editForm.showErrors();
+                    return false;
+                }
+                this.saved = true;
+                this.saveComponent(component, parent, isNew, original);
+            });
+        });
+        const previewButtons = this.componentEdit.querySelectorAll('[ref="previewButton"]');
+        previewButtons.forEach((previewButton) => {
+            this.editForm.addEventListener(previewButton, 'click', (event) => {
+                event.preventDefault();
+                this.showPreview = !this.showPreview;
+                this.editForm.detach();
+                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
+                    componentInfo: ComponentClass.builderInfo,
+                    editForm: this.editForm.render(),
+                    preview: this.preview ? this.preview.render() : false,
+                    showPreview: this.showPreview,
+                    helplinks: this.helplinks,
+                }));
+                this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
+            });
+        });
+    }
     editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {
         if (!component.key) {
             return;
         }
-        let saved = false;
+        this.saved = false;
         const componentCopy = fastCloneDeep(component);
         let ComponentClass = Components.components[componentCopy.type];
         const isCustom = ComponentClass === undefined;
@@ -1195,7 +1255,9 @@ export default class WebformBuilder extends Component {
                 }
             ]
         } : ComponentClass.editForm(_.cloneDeep(overrides));
-        const instanceOptions = {};
+        const instanceOptions = {
+            inFormBuilder: true,
+        };
         this.hook('instanceOptionsPreview', instanceOptions);
         const instance = new ComponentClass(componentCopy, instanceOptions);
         const schema = this.hook('builderComponentSchema', component, instance);
@@ -1220,12 +1282,14 @@ export default class WebformBuilder extends Component {
             ]));
             this.hook('previewFormSettitngs', schema, isJsonEdit);
         }
+        this.showPreview = ComponentClass.builderInfo.showPreview ?? true;
         this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });
         this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
             componentInfo: ComponentClass.builderInfo,
             editForm: this.editForm.render(),
             preview: this.preview ? this.preview.render() : false,
-            helplinks: this.helplinks,
+            showPreview: this.showPreview,
+            helplinks: this.helplinks
         }));
         this.dialog = this.createModal(this.componentEdit, _.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
@@ -1279,48 +1343,14 @@ export default class WebformBuilder extends Component {
                 this.updateComponent(event.data.componentJson || event.data, event.changed);
             }
         });
-        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
-        cancelButtons.forEach((cancelButton) => {
-            this.addEventListener(cancelButton, 'click', (event) => {
-                event.preventDefault();
-                this.editForm.detach();
-                this.emit('cancelComponent', component);
-                this.dialog.close();
-                this.highlightInvalidComponents();
-            });
-        });
-        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
-        removeButtons.forEach((removeButton) => {
-            this.addEventListener(removeButton, 'click', (event) => {
-                event.preventDefault();
-                // Since we are already removing the component, don't trigger another remove.
-                saved = true;
-                this.editForm.detach();
-                this.removeComponent(component, parent, original);
-                this.dialog.close();
-                this.highlightInvalidComponents();
-            });
-        });
-        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
-        saveButtons.forEach((saveButton) => {
-            this.addEventListener(saveButton, 'click', (event) => {
-                event.preventDefault();
-                if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
-                    this.editForm.setPristine(false);
-                    this.editForm.showErrors();
-                    return false;
-                }
-                saved = true;
-                this.saveComponent(component, parent, isNew, original);
-            });
-        });
+        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
         const dialogClose = () => {
             this.editForm.destroy(true);
             if (this.preview) {
                 this.preview.destroy(true);
                 this.preview = null;
             }
-            if (isNew && !saved) {
+            if (isNew && !this.saved) {
                 this.removeComponent(component, parent, original);
                 this.highlightInvalidComponents();
             }
@@ -1339,15 +1369,21 @@ export default class WebformBuilder extends Component {
             data.type).replace(/^[0-9]*/, '');
     }
     moveComponent(component) {
+        if (this.selectedComponent) {
+            const prevSelected = this.selectedComponent;
+            prevSelected.element?.classList.remove('builder-component-selected');
+            this.removeEventListener(document, 'keydown');
+        }
         component.element.focus();
-        component.element.classList.add('builder-selected');
-        this.selectedElement = component;
-        this.removeEventListener(component.element, 'keydown');
-        this.addEventListener(component.element, 'keydown', this.moveHandler.bind(this));
+        component.element.classList.add('builder-component-selected');
+        this.selectedComponent = component;
+        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));
     }
     moveHandler = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
+        if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
         if (e.keyCode === 38) {
             this.updateComponentPlacement(true);
         }
@@ -1355,11 +1391,11 @@ export default class WebformBuilder extends Component {
             this.updateComponentPlacement(false);
         }
         if (e.keyCode === 13) {
-            this.stopMoving(this.selectedElement);
+            this.stopMoving(this.selectedComponent);
         }
     };
     updateComponentPlacement(direction) {
-        const component = this.selectedElement;
+        const component = this.selectedComponent;
         let index, info;
         const step = direction ? -1 : 1;
         if (component) {
@@ -1402,7 +1438,9 @@ export default class WebformBuilder extends Component {
     }
     stopMoving(comp) {
         const parent = comp.element.parentNode;
+        this.removeEventListener(document, 'keydown');
         parent.formioComponent.rebuild();
+        this.selectedComponent = null;
     }
     addNewComponent(element) {
         const source = document.querySelector('.formio-builder-form');

package/lib/mjs/Wizard.d.ts

@@ -11,7 +11,7 @@ declare class Wizard extends Webform {
     _seenPages: number[];
     subWizards: any[];
     allPages: any[];
-    lastPromise: any;
+    lastPromise: Promise<void>;
     enabledIndex: number;
     editMode: boolean;
     originalOptions: any;
@@ -40,6 +40,7 @@ declare class Wizard extends Webform {
     prepareHeaderSettings(ctx: any, headerType: any): any;
     redrawNavigation(): void;
     redrawHeader(): void;
+    attach(element: any): Promise<void>;
     scrollPageToTop(): void;
     isBreadcrumbClickable(): any;
     isAllowPrevious(): any;
@@ -60,16 +61,18 @@ declare class Wizard extends Webform {
     establishPages(data?: any): any[];
     updatePages(): void;
     addComponents(): void;
-    setPage(num: any): any;
+    setPage(num: any): Promise<void>;
     pageFieldLogic(page: any): void;
     get currentPage(): any;
     getNextPage(): number | null;
     getPreviousPage(): number;
+    beforeSubmit(): Promise<any[]>;
+    beforePage(next: any): Promise<any>;
     emitNextPage(): void;
-    nextPage(): any;
+    nextPage(): Promise<void>;
     emitPrevPage(): void;
-    prevPage(): any;
-    cancel(noconfirm: any): any;
+    prevPage(): Promise<void>;
+    cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;
     get schema(): Object;
     setComponentSchema(): void;