Merge pull request #5672 from formio/FIO-8304-multiple-mask-left-empty

FIO-8304: allow for multivalue masks to have blank input mask option

src/components/_classes/multivalue/Multivalue.js

@@ -275,10 +275,17 @@ export default class Multivalue extends Field {
 
   /**
    * @param {any} input - The input element on which the mask is to be applied.
-   * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+   * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
    */
   updateMask(input, mask) {
     if (!mask) {
+      if (input.mask) {
+        input.mask.destroy();
+      }
+      if (!this.component.placeholder) {
+        input.removeAttribute('placeholder');
+      }
+      input.value = '';
       return;
     }
     this.setInputMask(input, mask, !this.component.placeholder);

src/components/phonenumber/PhoneNumber.unit.js

@@ -5,6 +5,7 @@ import { Formio } from './../../Formio';
 
 import {
   comp1,
+  comp2
 } from './fixtures';
 
 describe('PhoneNumber Component', () => {
@@ -55,4 +56,18 @@ describe('PhoneNumber Component', () => {
       })
       .catch(done);
   });
+
+  it('Should remove previous input mask when switching to a blank input mask', (done) => {
+    Formio.createForm(document.createElement('div'), comp2, {}).then((form) => {
+      const phoneNumberComponent = form.getComponent('phoneNumber');
+      const changeEvent = new Event('change');
+      phoneNumberComponent.refs.select[0].value = "Other";
+      phoneNumberComponent.refs.select[0].dispatchEvent(changeEvent);
+      setTimeout(()=>{
+        assert.equal(phoneNumberComponent.refs.input[0].querySelector('input').value, "");
+        assert.equal(phoneNumberComponent.refs.input[0].querySelector('input').getAttribute('placeholder'), null);
+        done();
+      },200);
+    });
+  });
 });

src/components/phonenumber/fixtures/comp2.js

@@ -0,0 +1,23 @@
+export default {
+  components: [
+    {
+      "label": "Phone Number",
+      "applyMaskOn": "change",
+      "allowMultipleMasks": true,
+      "tableView": true,
+      "key": "phoneNumber",
+      "type": "phoneNumber",
+      "inputMasks": [
+        {
+          "label": "Canada",
+          "mask": "(999) 999-9999"
+        },
+        {
+          "label": "Other",
+          "mask": ""
+        }
+      ],
+      "input": true
+    }
+  ]
+}

src/components/phonenumber/fixtures/index.js

@@ -1,2 +1,3 @@
 import comp1 from './comp1';
-export { comp1 };
+import comp2 from './comp2'
+export { comp1, comp2 };