feat(b-form-file, b-form-checkbox, b-form-radio): make input element inherit non-prop attributes (addresses #3752) (#3754)

tmorehouse · web-flow · commit 722f9db37163 · 2019-07-26T10:26:25.000-03:00
diff --git a/src/components/form-checkbox/form-checkbox.spec.js b/src/components/form-checkbox/form-checkbox.spec.js
@@ -279,6 +279,20 @@ describe('form-checkbox', () => {
     wrapper.destroy()
   })
 
+  it('has custom attributes transferred to input element', async () => {
+    const wrapper = mount(BFormCheckbox, {
+      propsData: {
+        id: 'foo',
+        foo: 'bar'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('foo')).toBeDefined()
+    expect(input.attributes('foo')).toEqual('bar')
+
+    wrapper.destroy()
+  })
+
   it('default has class custom-control-inline when prop inline=true', async () => {
     const wrapper = mount(BFormCheckbox, {
       propsData: {
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
@@ -14,6 +14,7 @@ const NAME = 'BFormFile'
 export const BFormFile = /*#__PURE__*/ Vue.extend({
   name: NAME,
   mixins: [idMixin, formMixin, formStateMixin, formCustomMixin, normalizeSlotMixin],
+  inheritAttrs: false,
   model: {
     prop: 'value',
     event: 'input'
@@ -261,6 +262,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
         this.stateClass
       ],
       attrs: {
+        ...this.$attrs,
         type: 'file',
         id: this.safeId(),
         name: this.name,
diff --git a/src/components/form-file/form-file.spec.js b/src/components/form-file/form-file.spec.js
@@ -135,6 +135,20 @@ describe('form-file', () => {
     wrapper.destroy()
   })
 
+  it('default has custom attributes transferred input element', async () => {
+    const wrapper = mount(BFormFile, {
+      propsData: {
+        id: 'foo',
+        foo: 'bar'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('foo')).toBeDefined()
+    expect(input.attributes('foo')).toEqual('bar')
+
+    wrapper.destroy()
+  })
+
   it('default has class focus when input focused', async () => {
     const wrapper = mount(BFormFile, {
       propsData: {
diff --git a/src/components/form-radio/form-radio.spec.js b/src/components/form-radio/form-radio.spec.js
@@ -261,6 +261,20 @@ describe('form-radio', () => {
     wrapper.destroy()
   })
 
+  it('has custom attributes transferred to input element', async () => {
+    const wrapper = mount(BFormRadio, {
+      propsData: {
+        id: 'foo',
+        foo: 'bar'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('foo')).toBeDefined()
+    expect(input.attributes('foo')).toEqual('bar')
+
+    wrapper.destroy()
+  })
+
   it('default has class custom-control-inline when prop inline=true', async () => {
     const wrapper = mount(BFormRadio, {
       propsData: {
diff --git a/src/mixins/form-radio-check.js b/src/mixins/form-radio-check.js
@@ -3,6 +3,7 @@ import normalizeSlotMixin from './normalize-slot'
 // @vue/component
 export default {
   mixins: [normalizeSlotMixin],
+  inheritAttrs: false,
   model: {
     prop: 'checked',
     event: 'input'
@@ -198,6 +199,7 @@ export default {
         }
       ],
       attrs: {
+        ...this.$attrs,
         id: this.safeId(),
         type: this.isRadio ? 'radio' : 'checkbox',
         name: this.getName,
