Merge pull request #5661 from formio/FIO-7775-reset-value-to-default-…

…value

FIO-7775: reset value event resets component values to their default values

src/components/_classes/component/Component.js

@@ -1678,7 +1678,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 +2398,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 +3052,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 +3233,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;

src/components/_classes/component/Component.unit.js

@@ -5,7 +5,7 @@ import sinon from 'sinon';
 import Component from './Component';
 import Webform from '../../../Webform';
 import Harness from '../../../../test/harness';
-import { comp1 } from './fixtures';
+import { comp1, comp6 } from './fixtures';
 import _merge from 'lodash/merge';
 import comp3 from './fixtures/comp3';
 import comp4 from './fixtures/comp4';
@@ -370,4 +370,28 @@ 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);
+  });
 });

src/components/_classes/component/fixtures/comp6.js

@@ -0,0 +1,57 @@
+export default {
+  "components": [
+    {
+      "label": "Text Field",
+      "applyMaskOn": "change",
+      "tableView": true,
+      "key": "textField",
+      "type": "textfield",
+      "input": true,
+      "defaultValue": "test"
+    },
+    {
+      "label": "Number",
+      "applyMaskOn": "change",
+      "mask": false,
+      "tableView": false,
+      "delimiter": false,
+      "requireDecimal": false,
+      "inputFormat": "plain",
+      "truncateMultipleSpaces": false,
+      "key": "number",
+      "type": "number",
+      "input": true,
+      "defaultValue": 123
+    },
+    {
+      "label": "Select",
+      "widget": "choicesjs",
+      "tableView": true,
+      "data": {
+        "values": [
+          {
+            "label": "a",
+            "value": "a"
+          },
+          {
+            "label": "b",
+            "value": "b"
+          }
+        ]
+      },
+      "key": "select",
+      "type": "select",
+      "input": true,
+      "defaultValue": "a"
+    },
+    {
+      "label": "Reset",
+      "action": "reset",
+      "showValidations": false,
+      "tableView": false,
+      "key": "reset",
+      "type": "button",
+      "input": true
+    },
+  ]
+}

src/components/_classes/component/fixtures/index.js

@@ -3,4 +3,5 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
-export { comp1, comp2, comp3, comp4, comp5 };
+import comp6 from './comp6';
+export { comp1, comp2, comp3, comp4, comp5, comp6 };