Cleave fields - conditional visibility messes with cleave options

[jewbetcha]

I'm submitting a bug report

What is the current behavior?
I have a form that includes a few cleave fields, just for formatting sake. These two fields share the same model name, but only one is visible at any given time based on a previous radio button field. Changing the radio field to determine visibility also clears the model value for the cleave fields.

The schema looks like this:

       {
          type: "radio",
          label:
            "Please enter the number corresponding to one of the following types of identification:",
          model: "identification_number_type",
          required: true,
          values: [
            {
              name: "U.S. Social Security Number (“SSN”)",
              value: "SSN"
            },
            {
              name: "U.S. Tax Identification Number (“TIN”)",
              value: "TIN"
            },
          ],
          validator: "required",
          onChanged: function(model) {
            model.identification_number_value = "";
          }
        },
      {
          type: "cleave",
          inputType: "text",
          label: "U.S. Social Security Number (“SSN”)",
          model: "identification_number_value",
          placeholder: "XXX-XX-XXXX",
          required: true,
          validator: ["string", "required"],
          cleaveOptions: {
            blocks: [3, 2, 4],
            delimiter: "-",
            numericOnly: true
          },
          visible: function(model) {
            return model && model.identification_number_type == "SSN";
          }
        },
        {
          type: "cleave",
          inputType: "text",
          label: "U.S. Tax Identification Number (“TIN”)",
          model: "identification_number_value",
          placeholder: "XX-XXXXXXX",
          required: true,
          validator: ["string", "required"],
          cleaveOptions: {
            blocks: [2, 7],
            delimiter: "-",
            numericOnly: true
          },
          visible: function(model) {
            return model && model.identification_number_type == "TIN";
          }
        }

On page load, selecting one of the fields and entering your value will come out correctly. e.g. your SSN will look like 123-45-6789. However, if you enter a value into one of the cleave fields, then change your mind and switch to a different format, the cleave field will keep the formatting from the first choice.

Example: Page loads, I choose SSN and enter it as 123-45-6789. Change my mind and select TIN, SSN field is gone, model value cleared out, TIN field shows up, yet when I enter a value it is still formatted as 123-45-6789.

This will also happen if you first select and enter TIN, then switch to SSN, your value will look like 12-3456789.

I have tried using different model names, and this does not solve the problem

I have also verified with the Vue inspector tool that the fields do indeed switch, and the correct schema is present at the time.

Could this be a bug in the Cleave library? Any ideas would greatly help!

Please tell us about your environment:

• Version: 2.2.2
• Browser: all
• Language: ES6/7