Merge branch 'master' into FIO-7478-fixed-datagrid-reordering

formio · Jul 14, 2024 · 50b8944 · 50b8944
2 parents 1af299f + a4d0429
commit 50b8944
Show file tree

Hide file tree

Showing 35 changed files with 641 additions and 55 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -4,7 +4,19 @@ All notable changes to this project will be documented in this file
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased: 5.0.0]
+## [Unreleased: 5.1.0-rc.1]
+### Changed
+ - FIO-8270: panel component closing on logic event trigger
+ - FIO-8575: Added ability to reload google maps library with correct API key
+ - FIO-8659: no modal edit in display tab
+ - Removing fetch ponyfill since it is no longer needed
+ - FIO-8652: DataGrid does not reorder
+ - Fixing the submitOnEnter where it will show the loader for the submit
+ - Fixing the formioReady promise to always resolve if you load it from the full source instead of the embed code
+ - FIO-8126: Fixed select component emitting blur on click
+ - FIO-8304: allow for multivalue masks to have blank input mask option
+ - FIO-8570: fixed decimal symbol property on number component
+ - 5.x - FIO-8426: changes required for eSignature
 
 ### New Features
 
@@ -222,7 +234,6 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
 
   - With the 5.x renderer, all templates are now stored within a separate repo, and are included as a dependency for this renderer. 
 
-## [Unreleased: 5.0.0-rc.40]
 ### Fixed
  - FIO-7525: fixed an issue where new conditional logic based on select boxes does not work
  - Fix broken file exclusion patterns
@@ -299,6 +310,12 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
  - FIO-8027 added new Captcha provider
  - FIO-8281: fixed selectData property for multiple select component
  - FIO-8420: file component no defaults causes error
+ - FIO-8493: Added null check for this.root in builder mode
+ - Adding JSDocs and fixes for the 5x Renderer Version
+ - FIO-8438: fix datagrid addrow clearing checkbox
+ - FIO-8496: added loading=async for Google Maps JavaScript API
+ - FIO-8445: Fixed searchbar not focusing when navigating using up and down arrows
+ - FIO-7936: showCounter messages not translating
 
 ## 5.0.0-rc.37
 ### Fixed
@@ -353,6 +370,8 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
  - FIO-4871: fixed calculated value for data grid component
  - FIO-7591: error messages wrapping on letter instead of on word
  - FIO-7548: fixed an issue where select dropdown does not overlap the datagrid and causes vertical scroll
+ - FIO-7775: reset value event resets component values to their default values
+ - FIO-6710: added translation for day component placeholder
 
 ### Changed
  - Add capability for adding sanitize profiles through sanitizeConfig in options

diff --git a/package.json b/package.json
@@ -99,7 +99,6 @@
     "eventemitter3": "^5.0.1",
     "fast-deep-equal": "^3.1.3",
     "fast-json-patch": "^3.1.1",
-    "fetch-ponyfill": "^7.1.0",
     "idb": "^7.1.1",
     "inputmask": "^5.0.8",
     "ismobilejs": "^1.1.1",

diff --git a/src/Formio.js b/src/Formio.js
@@ -131,4 +131,5 @@ if (typeof window !== 'undefined') {
   FormioCore.addToGlobal(window);
 }
 
+FormioEmbed._formioReady(FormioCore);
 export { FormioCore as Formio };
diff --git a/src/Webform.js b/src/Webform.js
@@ -15,6 +15,7 @@ import {
     getArrayFromComponentPath,
 } from "./utils/utils";
 import { eachComponent } from "./utils/formUtils";
+import dragula from "dragula";
 
 // Initialize the available forms.
 Formio.forms = {};
@@ -322,6 +323,8 @@ export default class Webform extends NestedDataComponent {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
+
+        this.root.dragulaLib = dragula;
     }
     /* eslint-enable max-statements */
 
@@ -782,6 +785,19 @@ export default class Webform extends NestedDataComponent {
         this.setSubmission(submission);
     }
 
+    /**
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubmission(submission, flags = {}) {
+      this.submissionSet = true;
+      this.triggerChange(flags);
+      this.emit('beforeSetSubmission', submission);
+      this.setValue(submission, flags);
+    }
+
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param {any} submission - The submission to set.
@@ -802,10 +818,7 @@ export default class Webform extends NestedDataComponent {
                             ...resolveFlags,
                         };
                     }
-                    this.submissionSet = true;
-                    this.triggerChange(flags);
-                    this.emit("beforeSetSubmission", submission);
-                    this.setValue(submission, flags);
+                    this.onSetSubmission(submission, flags);
                     return this.submissionReadyResolve(submission);
                 },
                 (err) => this.submissionReadyReject(err)
@@ -988,7 +1001,9 @@ export default class Webform extends NestedDataComponent {
             "submitButton",
             (options) => {
                 this.submit(false, options).catch((e) => {
-                    options.instance.loading = false;
+                    if (options?.instance) {
+                        options.instance.loading = false;
+                    }
                     return e !== false && e !== undefined && console.log(e);
                 });
             },
@@ -1253,7 +1268,6 @@ export default class Webform extends NestedDataComponent {
         // Mark any components as invalid if in a custom message.
         errors.forEach((err) => {
             const { components = [] } = err;
-
             if (err.component) {
                 components.push(err.component);
             }

diff --git a/src/Webform.unit.js b/src/Webform.unit.js
@@ -422,10 +422,10 @@ describe('Webform tests', function() {
       const blurEvent = new Event('blur');
 
       const selectChoices = form.getComponent('selectChoices');
-      selectChoices.focusableElement.dispatchEvent(focusEvent);
+      selectChoices.choices.input.element.dispatchEvent(focusEvent);
 
       setTimeout(() => {
-        selectChoices.focusableElement.dispatchEvent(blurEvent);
+        selectChoices.choices.input.element.dispatchEvent(blurEvent);
 
         const selectHtml = form.getComponent('selectHtml');
         selectHtml.refs.selectContainer.dispatchEvent(focusEvent);

diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
@@ -1193,6 +1193,15 @@ export default class Component extends Element {
     this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
   }
 
+  /**
+   * Renders a modal preview template and returns the markup as a string
+   * @param {object|null|undefined} ctx - The rendering context
+   * @returns {string} - The modal preview markup
+   */
+  renderModalPreview(ctx) {
+    return this.renderTemplate('modalPreview', ctx || {});
+  }
+
   /**
    * Returns the modal preview template.
    * @returns {string} - The modal preview template.
@@ -1205,7 +1214,7 @@ export default class Component extends Element {
       modalLabel = { className: 'field-required' };
     }
 
-    return this.renderTemplate('modalPreview', {
+    return this.renderModalPreview({
       previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
       messages: '',
       labelInfo: modalLabel,
@@ -1259,6 +1268,29 @@ export default class Component extends Element {
     }
   }
 
+  /**
+   * Creates the tooltip instance using tippy.js and returns it
+   * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+   * @param {object|null|undefined} settings - tippy.js options
+   * @returns {import('tippy.js').Tippy} - tippy.js instance
+   */
+  createTooltip(tooltipEl, settings = {}) {
+    const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
+    const tooltipDataTitle = tooltipEl.getAttribute('data-title');
+    const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
+                            .replace(/(?:\r\n|\r|\n)/g, '<br />');
+
+    return tippy(tooltipEl, {
+      allowHTML: true,
+      trigger: 'mouseenter click focus',
+      placement: 'right',
+      zIndex: 10000,
+      interactive: true,
+      ...settings,
+      content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+    });
+  }
+
   /**
    * Attaches all the tooltips provided the refs object.
    * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -1267,19 +1299,7 @@ export default class Component extends Element {
   attachTooltips(toolTipsRefs) {
     toolTipsRefs?.forEach((tooltip, index) => {
       if (tooltip) {
-        const tooltipAttribute = tooltip.getAttribute('data-tooltip');
-        const tooltipDataTitle = tooltip.getAttribute('data-title');
-        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-                                .replace(/(?:\r\n|\r|\n)/g, '<br />');
-
-        this.tooltips[index] = tippy(tooltip, {
-          allowHTML: true,
-          trigger: 'mouseenter click focus',
-          placement: 'right',
-          zIndex: 10000,
-          interactive: true,
-          content: this.t(this.sanitize(tooltipText), { _userInput: true }),
-        });
+        this.tooltips[index] = this.createTooltip(tooltip);
       }
     });
   }
@@ -1678,7 +1698,7 @@ export default class Component extends Element {
 
   /**
    * Creates a modal to input the value of this component.
-   * @param {HTMLElement} element - The element to attach the modal to. 
+   * @param {HTMLElement} element - The element to attach the modal to.
    * @param {any} attr - A list of attributes to add to the modal.
    * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.
    * @returns {HTMLElement} - The created modal element.
@@ -2398,7 +2418,7 @@ export default class Component extends Element {
    * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.
    * @param {boolean} dirty - If the input is dirty.
    * @param {boolean} hasErrors - If the input has errors.
-   * @param {boolean} hasMessages - If the input has messages. 
+   * @param {boolean} hasMessages - If the input has messages.
    * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.
    * @returns {void}
    */
@@ -3052,7 +3072,7 @@ export default class Component extends Element {
    */
   resetValue() {
     this.unset();
-    this.setValue(this.emptyValue, {
+    this.setValue(this.defaultValue || this.emptyValue, {
       noUpdateEvent: true,
       noValidate: true,
       resetValue: true
@@ -3233,7 +3253,7 @@ export default class Component extends Element {
    * @param {*} data - The data to perform the calculation with.
    * @param {*} flags - The flags to use when calculating the value.
    * @param {*} row - The contextual row data to use when performing the calculation.
-   * @returns {boolean} - TRUE if the value changed. 
+   * @returns {boolean} - TRUE if the value changed.
    */
   calculateValue(data, flags, row) {
     data = data || this.rootValue;
@@ -3850,6 +3870,10 @@ export default class Component extends Element {
 
               // Change states which won't be recalculated during redrawing
               if (this.visible !== visible) {
+                // If the logic is triggered by an event and the action sets the hidden state then the original
+                // component definition must be changed so that the components hidden state does not get flipped back by
+                // the fieldLogic function
+                this.originalComponent.hidden = !visible;
                 this.visible = visible;
               }
               if (this.disabled !== disabled) {

diff --git a/src/components/_classes/component/Component.unit.js b/src/components/_classes/component/Component.unit.js
@@ -5,11 +5,8 @@ import sinon from 'sinon';
 import Component from './Component';
 import Webform from '../../../Webform';
 import Harness from '../../../../test/harness';
-import { comp1 } from './fixtures';
+import { comp1, comp4, comp3, comp5, comp6, comp7 } from './fixtures';
 import _merge from 'lodash/merge';
-import comp3 from './fixtures/comp3';
-import comp4 from './fixtures/comp4';
-import comp5 from './fixtures/comp5';
 
 describe('Component', () => {
   it('Should create a Component', (done) => {
@@ -370,4 +367,46 @@ describe('Component', () => {
     })
       .catch(done);
   });
+
+  it('Should reset value to default value if default value is given', (done) => {
+    Formio.createForm(document.createElement('div'), comp6, {}).then((form) => {
+      const inputValue = (value, component) => {
+        const input = component.refs.input?.[0] || component.refs.selectContainer;
+        const inputEvent = new Event('input');
+        input.value = value;
+        input.dispatchEvent(inputEvent);
+      };
+      const textfield = form.getComponent('textField');
+      const number = form.getComponent('number');
+      const select = form.getComponent('select');
+      inputValue('hello', textfield);
+      inputValue('321', number);
+      inputValue('b', select);
+      setTimeout(()=>{
+        form.resetValue();
+        assert.equal(textfield.refs.input[0].value, 'test');
+        assert.equal(number.refs.input[0].value, '123');
+        assert.equal(select.refs.selectContainer.value, 'a');
+        done();
+      },200);
+    }).catch(done);
+  });
+
+  it('Should set the state of hidden permanently if a logic event action sets the hidden state', (done) => {
+    Formio.createForm(document.createElement('div'), comp7, {}).then((form) => {
+      const showButtonComponent = form.getComponent('show');
+      const textFieldComponent = form.getComponent('textField1');
+      const panelComponent = form.getComponent('panel');
+      showButtonComponent.refs.button.click();
+      setTimeout(()=>{
+        textFieldComponent.refs.input[0].value = "test"
+        textFieldComponent.refs.input[0].dispatchEvent(new Event('input'));
+        setTimeout(()=>{
+          assert.equal(panelComponent.component.hidden, false);
+          assert.equal(panelComponent.visible, true);
+          done();
+        },400);
+      },200);
+    });
+  });
 });
diff --git a/src/components/_classes/component/editForm/Component.edit.display.js b/src/components/_classes/component/editForm/Component.edit.display.js
@@ -187,5 +187,13 @@ export default [
     key: 'tableView',
     input: true
   },
+  {
+    weight: 1600,
+    type: 'checkbox',
+    label: 'Modal Edit',
+    tooltip: 'Opens up a modal to edit the value of this component.',
+    key: 'modalEdit',
+    input: true
+  }
 ];
 /* eslint-enable max-len */