feat(forms): add form prop to all inputs. fixes bootstrap-vue#2154 (bootstrap-vue#2172)

tmorehouse · web-flow · commit 6009d723d1c4 · 2018-11-13T22:18:33.000-04:00
* feat(forms): add form prop to all inputs. fixes bootstrap-vue#2154 form controls that are wrapped in other elements internally were not transferring the form attribute to the input. fixes bootstrap-vue#2154 * Update form-file.js add form attribute * Update form-input.js add form attribute * Update form-select.js add form attribute * Update form-select.js * Update form-textarea.js add form attribute * Update form-radio-check.js * Update form-checkbox.js add form attribute * Update form-checkbox-group.js add form attribute * Update form-radio.js add form attribute * Update form-radio-group.js add form attribute * Update form-input.spec.js add some basic tests * Update form-input.spec.js
diff --git a/src/components/form-checkbox/form-checkbox-group.js b/src/components/form-checkbox/form-checkbox-group.js
@@ -31,6 +31,7 @@ export default {
           props: {
             id: this.safeId(`_BV_check_${idx}_opt_`),
             name: this.name,
+            form: this.form || null,
             value: option.value,
             required: this.name && this.required,
             disabled: option.disabled
@@ -70,6 +71,10 @@ export default {
       type: [String, Number, Object, Array, Boolean],
       default: null
     },
+    form: {
+      type: String,
+      default: null
+    },
     validated: {
       type: Boolean,
       default: false
diff --git a/src/components/form-checkbox/form-checkbox.js b/src/components/form-checkbox/form-checkbox.js
@@ -37,6 +37,7 @@ export default {
         id: this.safeId(),
         type: 'checkbox',
         name: this.get_Name,
+        form: this.get_Form || null,
         disabled: this.is_Disabled,
         required: this.is_Required,
         autocomplete: 'off',
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
@@ -27,6 +27,7 @@ export default {
         name: this.name,
         disabled: this.disabled,
         required: this.required,
+        form: this.form || null,
         capture: this.capture || null,
         accept: this.accept || null,
         multiple: this.multiple,
diff --git a/src/components/form-input/form-input.js b/src/components/form-input/form-input.js
@@ -44,6 +44,7 @@ export default {
       attrs: {
         id: self.safeId(),
         name: self.name,
+        form: this.form || null,
         type: self.localType,
         disabled: self.disabled,
         required: self.required,
diff --git a/src/components/form-input/form-input.spec.js b/src/components/form-input/form-input.spec.js
@@ -91,6 +91,27 @@ describe('form-input', async () => {
     expect(input.attributes('id')).toBe('foobar')
   })
 
+  it('has safeId after mount when no id provided', async () => {
+    const wrapper = mount(Input, {
+      attachToDocument: true
+    })
+    const input = wrapper.find('input')
+    return wrapper.vm.$nextTick()
+      .then(function () {
+        expect(input.attributes('id')).toBeDefined()
+      })
+  })
+
+  it('has form attribute when form prop set', async () => {
+    const wrapper = mount(Input, {
+      propsData: {
+        form: 'foobar'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('form')).toBe('foobar')
+  })
+
   it('renders text input by default', async () => {
     const wrapper = mount(Input)
     const input = wrapper.find('input')
diff --git a/src/components/form-radio/form-radio-group.js b/src/components/form-radio/form-radio-group.js
@@ -30,6 +30,7 @@ export default {
           props: {
             id: this.safeId(`_BV_radio_${idx}_opt_`),
             name: this.name,
+            form: this.form || null,
             value: option.value,
             required: Boolean(this.name && this.required),
             disabled: option.disabled
@@ -69,6 +70,10 @@ export default {
       type: [String, Object, Number, Boolean],
       default: null
     },
+    form: {
+      type: String,
+      default: null
+    },
     validated: {
       // Used for applying hte `was-validated` class to the group
       type: Boolean,
diff --git a/src/components/form-radio/form-radio.js b/src/components/form-radio/form-radio.js
@@ -27,6 +27,7 @@ export default {
         id: this.safeId(),
         type: 'radio',
         name: this.get_Name,
+        form: this.get_Form || null,
         required: this.get_Name && this.is_Required,
         disabled: this.is_Disabled,
         autocomplete: 'off'
diff --git a/src/components/form-select/form-select.js b/src/components/form-select/form-select.js
@@ -40,6 +40,7 @@ export default {
         attrs: {
           id: this.safeId(),
           name: this.name,
+          form: this.form || null,
           multiple: this.multiple || null,
           size: this.computedSelectSize,
           disabled: this.disabled,
diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
@@ -22,6 +22,7 @@ export default {
       attrs: {
         id: this.safeId(),
         name: this.name,
+        form: this.form || null,
         disabled: this.disabled,
         placeholder: this.placeholder,
         required: this.required,
diff --git a/src/mixins/form-radio-check.js b/src/mixins/form-radio-check.js
@@ -89,6 +89,9 @@ export default {
     get_Name () {
       return (this.is_Child ? (this.$parent.name || this.$parent.safeId()) : this.name) || null
     },
+    get_Form () {
+      return this.is_Child ? (this.$parent.form || this.form) : this.form
+    },
     buttonClasses () {
       // Same for radio & check
       return [
diff --git a/src/mixins/form.js b/src/mixins/form.js
@@ -12,6 +12,10 @@ export default {
     required: {
       type: Boolean,
       default: false
+    },
+    form: {
+      type: String,
+      default: null
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,10 @@ export default {`
`12`	`12`	`required: {`
`13`	`13`	`type: Boolean,`
`14`	`14`	`default: false`
	`15`	`+ },`
	`16`	`+ form: {`
	`17`	`+ type: String,`
	`18`	`+ default: null`
`15`	`19`	`}`
`16`	`20`	`}`
`17`	`21`	`}`