Fixes a bug that can cause checkbox groups to reset themselves when changing their options

Author: justin-schroeder

dist/formulate.esm.js

@@ -276,6 +276,10 @@ export default {
     debounce: {
       type: [Boolean, Number],
       default: false
+    },
+    preventDeregister: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -405,7 +409,7 @@ export default {
         this.removeErrorObserver(this.setGroupErrors)
       }
     }
-    if (typeof this.formulateDeregister === 'function') {
+    if (typeof this.formulateDeregister === 'function' && !this.preventDeregister) {
       this.formulateDeregister(this.nameOrFallback)
     }
   },

dist/formulate.min.js

@@ -24,6 +24,7 @@
         v-model="context.model"
         v-bind="optionContext"
         :disable-errors="true"
+        :prevent-deregister="true"
         class="formulate-input-group-item"
         @blur="context.blurHandler"
       />

dist/formulate.umd.js

@@ -1229,4 +1229,39 @@ describe('FormulateForm', () => {
     await flushPromises()
     expect(wrapper.find('[data-output]').text()).toBe('4567')
   })
+
+  it('Can keep-model-data on box type inputs', async () => {
+    const wrapper = mount({
+      template: `
+        <FormulateForm
+          v-model="formValues"
+        >
+          <FormulateInput
+            v-if="showCheckboxes"
+            type="checkbox"
+            name="flavor"
+            :keep-model-data="true"
+            :options="options"
+          />
+        </FormulateForm>
+      `,
+      data () {
+        return {
+          showCheckboxes: true,
+          options: ['Apple', 'Banana'],
+          formValues: {}
+        }
+      }
+    })
+    wrapper.find('input[type="checkbox"]').setChecked(true)
+    await flushPromises()
+    expect(wrapper.vm.formValues).toEqual({ flavor: ['Apple'] })
+    wrapper.vm.options = ['Pizza']
+    await flushPromises()
+    expect(wrapper.vm.formValues).toEqual({ flavor: ['Apple'] })
+    wrapper.vm.showCheckboxes = false
+    await flushPromises()
+    expect(wrapper.vm.formValues).toEqual({ flavor: ['Apple'] })
+
+  })
 })

src/FormulateInput.vue

@@ -1059,4 +1059,39 @@ describe('FormulateInputGroup', () => {
     ).toEqual(['@fb-jane'])
   })
 
+  it.only('does not let checkboxes wipe their own value out', async () => {
+    const wrapper = mount({
+      template: `
+        <FormulateForm
+          v-model="formData"
+        >
+          <FormulateInput
+            name="pizzas"
+            type="group"
+            :repeatable="true"
+          >
+            <FormulateInput
+              type="checkbox"
+              name="flavors"
+              :options="options"
+            />
+          </FormulateInput>
+        </FormulateForm>
+      `,
+      data () {
+        return {
+          options: ['cheese', 'pepperoni', 'pineapple', 'sausage'],
+          formData: {
+            pizzas: [{ flavors: ['pepperoni', 'pineapple'] }]
+          }
+        }
+      }
+    })
+    await flushPromises()
+    expect(wrapper.vm.formData).toEqual({
+      pizzas: [{
+        flavors: ['pepperoni', 'pineapple']
+      }]
+    })
+  })
 })