Fixes issue wearebraid#138

Author: justin-schroeder

src/FormulateInputMixin.js

@@ -16,7 +16,7 @@ export default {
       return this.context.attributes || {}
     },
     hasValue () {
-      return !!this.context.model
+      return this.context.hasValue
     }
   }
 }

src/libs/context.js

@@ -462,11 +462,15 @@ function modelGetter () {
  * Set the value from a model.
  **/
 function modelSetter (value) {
+  let didUpdate = false
   if (!shallowEqualObjects(value, this.proxy)) {
     this.proxy = value
-    this.$emit('input', value)
+    didUpdate = true
   }
   if (this.context.name && typeof this.formulateSetter === 'function') {
     this.formulateSetter(this.context.name, value)
   }
+  if (didUpdate) {
+    this.$emit('input', value)
+  }
 }

src/libs/registry.js

@@ -1,4 +1,4 @@
-import { shallowEqualObjects, has } from './utils'
+import { shallowEqualObjects, has, isEmpty } from './utils'
 
 /**
  * Component registry with inherent depth to handle complex nesting. This is
@@ -85,7 +85,7 @@ class Registry {
     if (
       !hasVModelValue &&
       this.ctx.hasInitialValue &&
-      this.ctx.initialValues[field]
+      !isEmpty(this.ctx.initialValues[field])
     ) {
       // In the case that the form is carrying an initial value and the
       // element is not, set it directly.
@@ -191,6 +191,7 @@ export function useRegistryMethods (without = []) {
     },
     setFieldValue (field, value) {
       if (value === undefined) {
+        // undefined values should be removed from the form model
         const { [field]: value, ...proxy } = this.proxy
         this.proxy = proxy
       } else {

src/libs/utils.js

@@ -302,6 +302,9 @@ export function setId (o, id) {
  * @param {any} value
  */
 export function isEmpty (value) {
+  if (typeof value === 'number') {
+    return false
+  }
   return (
     value === undefined ||
     value === '' ||

test/unit/FormulateInput.test.js

@@ -743,4 +743,10 @@ describe('FormulateInput', () => {
     expect(wrapper.find('.formulate-input-help').exists()).toBe(false)
     resetInstance()
   })
+
+  it('allows an empty string as a validation prop', async () => {
+    const wrapper = mount(FormulateInput, { propsData: { validation: '', errorBehavior: 'live' }})
+    await flushPromises()
+    expect(wrapper.find('.formulate-errors').exists()).toBe(false)
+  })
 })

test/unit/FormulateInputSlider.test.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import flushPromises from 'flush-promises'
 import { mount } from '@vue/test-utils'
 import Formulate from '@/Formulate.js'
 import FormulateInput from '@/FormulateInput.vue'
@@ -62,4 +63,26 @@ describe('FormulateInputSlider', () => {
     })
     expect(wrapper.find('.formulate-input-element-range-value.custom-class').exists()).toBe(true)
   })
+
+  it('allows a numeric zero value but still hasValue', async () => {
+    const wrapper = mount({
+      template: `
+        <FormulateForm
+          v-model="model"
+        >
+          <FormulateInput type="slider" name="range" />
+        </FormulateForm>
+      `,
+      data () {
+        return {
+          model: {
+            range: 0
+          }
+        }
+      }
+    })
+    await flushPromises();
+    const input = wrapper.findComponent(FormulateInput)
+    expect(input.vm.context.hasValue).toBe(true)
+  })
 })

test/unit/utils.test.js

@@ -281,6 +281,7 @@ describe('groupBails', () => {
 
     it('is false when string', () => expect(isEmpty('pizza')).toBe(false))
     it('is false when zero string', () => expect(isEmpty('0')).toBe(false))
+    it('is false when zero value', () => expect(isEmpty(0)).toBe(false))
     it('is false when has array values', () => expect(isEmpty(['first'])).toBe(false))
     it('is false when has object has values', () => expect(isEmpty([{ key: 'value' }])).toBe(false))
   })