fix: reset with select field

src/components/Fields/Select.spec.js

@@ -0,0 +1,96 @@
+import matchers from 'jest-vue-matcher'
+import { mount, createLocalVue } from '@vue/test-utils'
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import { extendRules, slug } from '@/helpers'
+import Form from '@/components/Form'
+
+extendRules()
+
+const localVue = createLocalVue()
+localVue.component('ValidationProvider', ValidationProvider)
+localVue.component('ValidationObserver', ValidationObserver)
+localVue.filter('slugify', str => slug(str))
+
+let wrapper
+
+const selectFormField = [{
+  label: 'Country',
+  type: 'select',
+  iconLeft: 'globe-americas',
+  placeholder: 'Select your option',
+  options: [
+    'Afghanistan',
+    'Åland Islands'
+  ]
+}]
+
+const setup = ({
+  formFields = selectFormField
+} = {}) => {
+  wrapper = mount(Form, {
+    localVue,
+    propsData: {
+      formName: 'testSelect',
+      formFields
+    }
+  })
+  expect.extend(matchers(wrapper))
+  return {
+    wrapper,
+    getAllOptions: () => wrapper.find('select').findAll('option')
+  }
+}
+
+describe('Select', () => {
+  it('has multiple options', () => {
+    const { wrapper } = setup()
+    const options = wrapper.findAll('select > option')
+    expect(options).toHaveLength(3)
+  })
+
+  it('has a first option disabled & selected as placeholder', () => {
+    const { wrapper } = setup()
+
+    const firstOption = wrapper.findAll('select > option').at(0)
+    const { disabled, text } = firstOption.element
+
+    expect(firstOption.attributes('selected')).toBe('selected')
+    expect(disabled).toBe(true)
+    expect(text).toBe(selectFormField[0].placeholder)
+  })
+
+  it('has no value by default', () => {
+    setup()
+    expect('select').toHaveValue('')
+  })
+
+  it('changes value', async () => {
+    const { getAllOptions, wrapper } = setup()
+    await getAllOptions().at(1).setSelected()
+
+    const expectedValue = selectFormField[0].options[0]
+    const expectedFormValues = { [selectFormField[0].label]: expectedValue }
+    expect('select').toHaveValue(expectedValue)
+    expect(wrapper.vm.formValues).toStrictEqual(expectedFormValues)
+  })
+
+  it('changes the selected options to the placeholder on reset', async () => {
+    const { getAllOptions, wrapper } = setup()
+    await getAllOptions().at(1).setSelected()
+
+    wrapper.find('input[type=reset]').trigger('reset')
+
+    expect('select').toHaveValue('')
+    expect(wrapper.vm.$el.querySelector('select').selectedIndex).toBe(0)
+  })
+
+  it('removes selected options on reset if no placeholder', async () => {
+    const [{ placeholder, ...rest }] = selectFormField
+    const { getAllOptions, wrapper } = setup({ formFields: [rest] })
+    await getAllOptions().at(1).setSelected()
+
+    wrapper.find('input[type=reset]').trigger('reset')
+
+    expect(wrapper.vm.$el.querySelector('select').selectedIndex).toBe(0)
+  })
+})

src/components/Form/Form.vue

@@ -1,8 +1,12 @@
 <template lang="pug">
-  ValidationObserver(v-slot="{ handleSubmit, invalid, reset }", tag="div", ref="form")
+  ValidationObserver(
+    v-slot="{ handleSubmit, invalid }",
+    tag="div",
+    ref="observer"
+  )
     form(:data-vv-scope="formName",
         @submit.prevent="handleSubmit(onSubmit)",
-        @reset.prevent="reset")
+        @reset.prevent="handleReset")
 
       div(v-for="(item, index) in formFields", :key="index")
         .field-body(v-if="Array.isArray(item)")
@@ -29,8 +33,7 @@
       .field.form-footer.is-grouped.is-opposed
         input(type="reset",
               v-bind="btnReset"
-              :class="btnReset.class || 'button'"
-              @click="resetForm")
+              :class="btnReset.class || 'button'")
         input(type="submit",
               v-bind="btnSubmit",
               :class="btnSubmit.class || 'button is-primary'"
@@ -125,9 +128,9 @@ export default {
   },
   methods: {
     async onSubmit (ev) {
-      const isValidated = await this.$refs.form.validate()
+      const isValid = await this.$refs.observer.validate()
 
-      if (isValidated) {
+      if (isValid) {
         const valuesFormatted = JSON.parse(JSON.stringify(this.formValues))
 
         this.emitValues({
@@ -136,14 +139,14 @@ export default {
             ? camelizeKeys(valuesFormatted)
             : valuesFormatted
         })
-        this.resetFormAfterSubmit && this.resetForm(ev)
+        this.resetFormAfterSubmit && this.handleReset(ev)
       }
     },
     emitValues (data) {
       this.$root.$emit('formSubmitted', data)
     },
     clearValues () {
-      const fieldsWithArrayValue = ['radio, checkbox']
+      const fieldsWithArrayValue = ['radio', 'checkbox']
 
       this.allControls.map(x => { x.value = '' })
 
@@ -161,16 +164,15 @@ export default {
 
       const selects = this.allControls.filter(x => x.item.type === 'select')
       selects.map(select => {
-        select.item.options.map(option => {
-          option.selected && !option.disabled && (delete option.selected)
-        })
+        select.$el.querySelector('select').selectedIndex =
+          select.item.placeholder ? 0 : -1
       })
     },
     resetFormValues () {
       this.clearValues()
       this.clearPrefillValues()
     },
-    async resetForm (ev) {
+    async handleReset (ev) {
       this.resetFormValues()
 
       try {
@@ -181,7 +183,7 @@ export default {
       }
 
       await this.$nextTick()
-      this.$refs.form.reset()
+      this.$refs.observer.reset()
     }
   }
 }