Adds default empty state for non repeatable groups

src/FormulateGrouping.vue

@@ -37,7 +37,13 @@ export default {
   inject: ['formulateRegisterRule', 'formulateRemoveRule'],
   computed: {
     items () {
-      return Array.isArray(this.context.model) ? this.context.model : [{}]
+      if (Array.isArray(this.context.model)) {
+        if (!this.context.repeatable && this.context.model.length === 0) {
+          return [{}]
+        }
+        return this.context.model
+      }
+      return [{}]
     },
     providers () {
       return this.items.map((item, i) => Array.isArray(this.$refs[`provider-${i}`]) ? this.$refs[`provider-${i}`][0] : false)

test/unit/FormulateInputGroup.test.js

@@ -5,6 +5,7 @@ import Formulate from '@/Formulate.js'
 import FileUpload from '@/FileUpload.js'
 import FormulateInput from '@/FormulateInput.vue'
 import FormulateForm from '@/FormulateForm.vue'
+import FormulateGrouping from '@/FormulateGrouping.vue'
 import FormulateRepeatableProvider from '@/FormulateRepeatableProvider.vue'
 
 Vue.use(Formulate)
@@ -396,4 +397,47 @@ describe('FormulateInputGroup', () => {
     expect(repeatables.at(0).text()).toBe('test-0')
     expect(repeatables.at(1).text()).toBe('test-1')
   })
+
+  it('forces non-repeatable groups to not initialize with an empty array', async () => {
+    const wrapper = mount({
+      template: `
+        <FormulateInput
+          type="group"
+          name="test"
+          v-model="model"
+        >
+          <div class="repeatable" />
+        </FormulateInput>
+      `,
+      data () {
+        return {
+          model: []
+        }
+      }
+    })
+    await flushPromises();
+    expect(wrapper.find(FormulateGrouping).vm.items).toEqual([{}])
+  })
+
+  it('allows repeatable groups to initialize with an empty array', async () => {
+    const wrapper = mount({
+      template: `
+        <FormulateInput
+          type="group"
+          name="test"
+          :repeatable="true"
+          v-model="model"
+        >
+          <div class="repeatable" />
+        </FormulateInput>
+      `,
+      data () {
+        return {
+          model: []
+        }
+      }
+    })
+    await flushPromises();
+    expect(wrapper.find(FormulateGrouping).vm.items).toEqual([])
+  })
 })