fix(selectable): pass disabled prop to internal input

Also DRYed up VRadio a bit

Applies to VRadio, VCheckbox, VSwitch

fixes #4796, fixes #4797

Author: KaelWD

src/components/VRadioGroup/VRadio.js

@@ -9,6 +9,7 @@ import VLabel from '../VLabel'
 import Colorable from '../../mixins/colorable'
 import Rippleable from '../../mixins/rippleable'
 import Themeable from '../../mixins/themeable'
+import Selectable from '../../mixins/selectable'
 import {
   inject as RegistrableInject
 } from '../../mixins/registrable'
@@ -100,31 +101,11 @@ export default {
   },
 
   methods: {
-    genInput (type, attrs) {
-      return this.$createElement('input', {
-        attrs: Object.assign({}, attrs, {
-          'aria-label': this.label,
-          name: this.radio.name || (this.radio._uid ? 'v-radio-' + this.radio._uid : false),
-          value: this.value,
-          role: type,
-          type
-        }),
-        domProps: {
-          checked: this.isActive
-        },
-        on: {
-          blur: this.onBlur,
-          change: this.onChange,
-          focus: this.onFocus,
-          keydown: e => {
-            if ([keyCodes.enter, keyCodes.space].includes(e.keyCode)) {
-              e.preventDefault()
-              this.onChange()
-            }
-          }
-        },
-        ref: 'input'
-      })
+    genInput (...args) {
+      // We can't actually use the mixin directly because
+      // it's made for standalone components, but its
+      // genInput method is exactly what we need
+      return Selectable.methods.genInput.call(this, ...args)
     },
     genLabel () {
       return this.$createElement(VLabel, {
@@ -145,7 +126,8 @@ export default {
         staticClass: 'v-input--selection-controls__input'
       }, [
         this.genInput('radio', {
-          'aria-checked': this.isActive.toString(),
+          name: this.radio.name || (this.radio._uid ? 'v-radio-' + this.radio._uid : false),
+          value: this.value,
           ...this.$attrs
         }),
         !this.isDisabled && this.genRipple({
@@ -173,6 +155,12 @@ export default {
       if (!this.isDisabled && (!this.isActive || !this.radio.mandatory)) {
         this.$emit('change', this.value)
       }
+    },
+    onKeydown (e) {
+      if ([keyCodes.enter, keyCodes.space].includes(e.keyCode)) {
+        e.preventDefault()
+        this.onChange()
+      }
     }
   },
 

src/mixins/selectable.js

@@ -73,6 +73,9 @@ export default {
 
       return this.valueComparator(input, this.trueValue)
     },
+    isDisabled () {
+      return this.disabled
+    },
     isDirty () {
       return this.isActive
     }
@@ -96,20 +99,25 @@ export default {
     },
     genInput (type, attrs) {
       return this.$createElement('input', {
-        attrs: Object.assign({}, {
+        attrs: Object.assign({
           'aria-label': this.label,
           'aria-checked': this.isActive.toString(),
+          disabled: this.isDisabled,
           id: this.id,
           role: type,
           type,
           value: this.inputValue
         }, attrs),
+        domProps: {
+          checked: this.isActive
+        },
         on: {
           blur: this.onBlur,
           change: this.onChange,
           focus: this.onFocus,
           keydown: this.onKeydown
-        }
+        },
+        ref: 'input'
       })
     },
     onBlur () {

test/unit/components/VCheckbox/VCheckbox.spec.js

@@ -406,4 +406,13 @@ test('VCheckbox.js', ({ mount }) => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should be disabled', () => {
+    const wrapper = mount(VCheckbox, {
+      propsData: { disabled: true }
+    })
+    const input = wrapper.first('input')
+
+    expect(input.html()).toMatchSnapshot()
+  })
 })

test/unit/components/VCheckbox/__snapshots__/VCheckbox.spec.js.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VCheckbox.js should be disabled 1`] = `
+
+<input aria-checked="false"
+       disabled="disabled"
+       role="checkbox"
+       type="checkbox"
+>
+
+`;
+
 exports[`VCheckbox.js should render themed component 1`] = `
 
 <div class="v-input v-input--selection-controls v-input--checkbox theme--light">

test/unit/components/VRadioGroup/VRadioGroup.spec.js

@@ -311,9 +311,11 @@ test('VRadioGroup.vue', ({ mount }) => {
 
     const onChange = jest.fn()
     const radio = wrapper.first(VRadio)
+    const input = radio.first('input')
     radio.vm.$on('change', onChange)
     radio.first('input').trigger('change')
     expect(onChange).not.toBeCalled()
+    expect(input.html()).toMatchSnapshot()
   })
 
   it('should make radios readonly', async () => {

test/unit/components/VRadioGroup/__snapshots__/VRadio.spec.js.snap

@@ -5,9 +5,9 @@ exports[`VRadio.vue should not render aria-label attribute with no label value o
 <div class="v-radio">
   <div class="v-input--selection-controls__input">
     <input aria-checked="false"
-           name="name"
            role="radio"
            type="radio"
+           name="name"
     >
     <div class="v-input--selection-controls__ripple">
     </div>
@@ -30,11 +30,11 @@ exports[`VRadio.vue should render aria-label attribute with label value on input
 
 <div class="v-radio">
   <div class="v-input--selection-controls__input">
-    <input aria-checked="false"
-           aria-label="Test"
-           name="name"
+    <input aria-label="Test"
+           aria-checked="false"
            role="radio"
            type="radio"
+           name="name"
     >
     <div class="v-input--selection-controls__ripple">
     </div>
@@ -59,9 +59,9 @@ exports[`VRadio.vue should render proper input name 1`] = `
 <div class="v-radio">
   <div class="v-input--selection-controls__input">
     <input aria-checked="false"
-           name="name"
            role="radio"
            type="radio"
+           name="name"
     >
     <div class="v-input--selection-controls__ripple">
     </div>
@@ -85,9 +85,9 @@ exports[`VRadio.vue should render role and aria-checked attributes on input grou
 <div class="v-radio accent--text">
   <div class="v-input--selection-controls__input">
     <input aria-checked="true"
-           name="name"
            role="radio"
            type="radio"
+           name="name"
     >
     <div class="v-input--selection-controls__ripple accent--text">
     </div>

test/unit/components/VRadioGroup/__snapshots__/VRadioGroup.spec.js.snap

@@ -13,9 +13,9 @@ exports[`VRadioGroup.vue should be in error when v-radio-group is 1`] = `
         <div class="v-radio">
           <div class="v-input--selection-controls__input">
             <input aria-checked="false"
-                   name="v-radio-4"
                    role="radio"
                    type="radio"
+                   name="v-radio-4"
             >
             <div class="v-input--selection-controls__ripple error--text">
             </div>
@@ -55,9 +55,9 @@ exports[`VRadioGroup.vue should be in error when v-radio-group is 2`] = `
         <div class="v-radio">
           <div class="v-input--selection-controls__input">
             <input aria-checked="false"
-                   name="v-radio-4"
                    role="radio"
                    type="radio"
+                   name="v-radio-4"
             >
             <div class="v-input--selection-controls__ripple">
             </div>
@@ -84,6 +84,17 @@ exports[`VRadioGroup.vue should be in error when v-radio-group is 2`] = `
 
 `;
 
+exports[`VRadioGroup.vue should make radios disabled 1`] = `
+
+<input aria-checked="false"
+       disabled="disabled"
+       role="radio"
+       type="radio"
+       name="v-radio-43"
+>
+
+`;
+
 exports[`VRadioGroup.vue should render role on radio group 1`] = `
 
 <div class="v-input v-input--selection-controls v-input--radio-group v-input--radio-group--column">