Fixes a bug that caused box inputs to reset their value when hydrated from a form and nested inside groups

Author: justin-schroeder

dist/formulate.esm.js

@@ -19,6 +19,26 @@
         />
       </FormulateInput>
     </div>
+    <div class="specimen">
+      <h3>Simple repeatable group</h3>
+      {{ formData }}
+      <FormulateForm
+        v-model="formData"
+      >
+        <FormulateInput
+          type="group"
+          name="foobar"
+          :repeatable="true"
+        >
+          <div class="wrap">
+            <FormulateInput
+              type="text"
+              name="name"
+            />
+          </div>
+        </FormulateInput>
+      </FormulateForm>
+    </div>
     <div class="specimen">
       <h3>Repeatable group</h3>
       <FormulateInput
@@ -54,5 +74,10 @@
 
 <script>
 export default {
+  data () {
+    return {
+      formData: {}
+    }
+  }
 }
 </script>

dist/formulate.min.js

@@ -110,7 +110,7 @@ export default {
     },
     setItem (index, groupProxy) {
       // Note: value must have an __id to use this function
-      if (Array.isArray(this.context.model) && this.context.model.length >= this.context.minimum) {
+      if (Array.isArray(this.context.model) && this.context.model.length >= this.context.minimum && !this.context.model.__init) {
         this.context.model.splice(index, 1, this.setId(groupProxy, index))
       } else {
         this.context.model = this.items.map((item, i) => i === index ? this.setId(groupProxy, index) : item)

dist/formulate.umd.js

@@ -424,6 +424,9 @@ export default {
         return this.value
       } else if (has(this.$options.propsData, 'formulateValue')) {
         return this.formulateValue
+      } else if (classification === 'group') {
+        // Set the value of an empty group
+        return Object.defineProperty(this.type === 'group' ? [{}] : [], '__init', { value: true })
       }
       return ''
     },

examples/specimens/SpecimenGroup.vue

@@ -713,7 +713,7 @@ describe('FormulateInputGroup', () => {
     })
   })
 
-  // This is basically the same test as found in FormulateForm sicne they share registry logic.
+  // This is basically the same test as found in FormulateForm since they share registry logic.
   it('can swap input types with the same name without loosing registration, but resetting values', async () => {
     const wrapper = mount({
       template: `
@@ -739,7 +739,7 @@ describe('FormulateInputGroup', () => {
       }
     })
     await flushPromises()
-    wrapper.find('input').setValue('Justin')
+    wrapper.find('input[name="test"]').setValue('Justin')
     await flushPromises()
     expect(wrapper.vm.formData).toEqual({ country: 'it', languages: [{ test: 'Justin' }] })
     wrapper.setData({ lang: 'en' })
@@ -1059,7 +1059,7 @@ describe('FormulateInputGroup', () => {
     ).toEqual(['@fb-jane'])
   })
 
-  it.only('does not let checkboxes wipe their own value out', async () => {
+  it('does not let checkboxes wipe their own value out', async () => {
     const wrapper = mount({
       template: `
         <FormulateForm
@@ -1089,9 +1089,7 @@ describe('FormulateInputGroup', () => {
     })
     await flushPromises()
     expect(wrapper.vm.formData).toEqual({
-      pizzas: [{
-        flavors: ['pepperoni', 'pineapple']
-      }]
+      pizzas: [{ flavors: ['pepperoni', 'pineapple'] }]
     })
   })
 })