Fixes a bug that caused box inputs to reset their value when hydrated…

… from a form and nested inside groups
wearebraid · Mar 5, 2021 · 73e1e8b · 73e1e8b
1 parent 3b41e16
commit 73e1e8b
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 10 deletions.
diff --git a/dist/formulate.esm.js b/dist/formulate.esm.js
diff --git a/dist/formulate.min.js b/dist/formulate.min.js
diff --git a/dist/formulate.umd.js b/dist/formulate.umd.js
diff --git a/examples/specimens/SpecimenGroup.vue b/examples/specimens/SpecimenGroup.vue
@@ -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>
diff --git a/src/FormulateGrouping.vue b/src/FormulateGrouping.vue
@@ -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)

diff --git a/src/FormulateInput.vue b/src/FormulateInput.vue
@@ -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 ''
     },

diff --git a/test/unit/FormulateInputGroup.test.js b/test/unit/FormulateInputGroup.test.js
@@ -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'] }]
     })
   })
 })