From 33b925bd48dc968ece58ba96d1571ff1fde0aded Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 7 Feb 2020 00:45:45 +1100
Subject: [PATCH 1/3] fix(VSelect): allow clickable append/prepend icons to be
 focused

---
 .../vuetify/src/components/VSelect/VSelect.ts | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
index 355bc80fc22..39b0921839a 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.ts
+++ b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -420,15 +420,16 @@ export default baseMixins.extend<options>().extend({
     ) {
       const icon = VInput.options.methods.genIcon.call(this, type, cb)
 
-      icon.children![0].data = mergeData(icon.children![0].data!, {
-        attrs: {
-          tabindex: type !== 'append'
-            ? undefined
-            : (icon.children![0].componentOptions!.listeners && '-1'),
-          'aria-hidden': 'true',
-          'aria-label': undefined,
-        },
-      })
+      if (type === 'append') {
+        // Don't allow the dropdown icon to be focused
+        icon.children![0].data = mergeData(icon.children![0].data!, {
+          attrs: {
+            tabindex: icon.children![0].componentOptions!.listeners && '-1',
+            'aria-hidden': 'true',
+            'aria-label': undefined,
+          },
+        })
+      }
 
       return icon
     },

From e8f2a263c14e950eaf7b86899a0c15ac4d51e882 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 7 Feb 2020 00:55:18 +1100
Subject: [PATCH 2/3] refactor(VTextField): always render a named icon when
 clearable

---
 .../__snapshots__/VFileInput.spec.ts.snap     | 22 ++++++++++++-------
 .../vuetify/src/components/VInput/VInput.sass |  3 +++
 .../vuetify/src/components/VInput/VInput.ts   | 10 ++++-----
 .../vuetify/src/components/VSelect/VSelect.ts |  7 +++---
 .../__snapshots__/VSelect2.spec.ts.snap       |  8 +++----
 .../src/components/VTextField/VTextField.ts   |  8 ++-----
 packages/vuetify/src/util/mergeData.ts        |  9 ++++++++
 7 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap b/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap
index 58323db45f1..c3aa14079a2 100644
--- a/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap
+++ b/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap
@@ -247,11 +247,14 @@ exports[`VFileInput.ts should render 1`] = `
         >
       </div>
       <div class="v-input__append-inner">
-        <div class="v-input__icon">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+        <div class="v-input__icon v-input__icon--clear">
+          <button disabled="disabled"
+                  type="button"
+                  aria-label="clear icon"
+                  class="v-icon notranslate v-icon--disabled v-icon--link material-icons theme--light"
           >
-          </i>
+            $clear
+          </button>
         </div>
       </div>
     </div>
@@ -429,11 +432,14 @@ exports[`VFileInput.ts should render without icon 1`] = `
         >
       </div>
       <div class="v-input__append-inner">
-        <div class="v-input__icon">
-          <i aria-hidden="true"
-             class="v-icon notranslate material-icons theme--light"
+        <div class="v-input__icon v-input__icon--clear">
+          <button disabled="disabled"
+                  type="button"
+                  aria-label="clear icon"
+                  class="v-icon notranslate v-icon--disabled v-icon--link material-icons theme--light"
           >
-          </i>
+            $clear
+          </button>
         </div>
       </div>
     </div>
diff --git a/packages/vuetify/src/components/VInput/VInput.sass b/packages/vuetify/src/components/VInput/VInput.sass
index b1fb1fc456a..c72eed54957 100644
--- a/packages/vuetify/src/components/VInput/VInput.sass
+++ b/packages/vuetify/src/components/VInput/VInput.sass
@@ -94,6 +94,9 @@
     &--clear
       border-radius: 50%
 
+      .v-icon--disabled
+        visibility: hidden
+
   &__slot
     align-items: center
     color: inherit
diff --git a/packages/vuetify/src/components/VInput/VInput.ts b/packages/vuetify/src/components/VInput/VInput.ts
index 5436dbb6ea9..a84ef109677 100644
--- a/packages/vuetify/src/components/VInput/VInput.ts
+++ b/packages/vuetify/src/components/VInput/VInput.ts
@@ -16,6 +16,7 @@ import {
   getSlot,
   kebabCase,
 } from '../../util/helpers'
+import mergeData from '../../util/mergeData'
 
 // Types
 import { VNode, VNodeData, PropType } from 'vue'
@@ -165,17 +166,16 @@ export default baseMixins.extend<options>().extend({
     },
     genIcon (
       type: string,
-      cb?: (e: Event) => void
+      cb?: (e: Event) => void,
+      extraData?: VNodeData
     ) {
       const icon = (this as any)[`${type}Icon`]
       const eventName = `click:${kebabCase(type)}`
       const hasListener = !!(this.listeners$[eventName] || cb)
 
-      const data: VNodeData = {
+      const data = mergeData({
         attrs: {
           'aria-label': hasListener ? kebabCase(type).split('-')[0] + ' icon' : undefined,
-        },
-        props: {
           color: this.validationState,
           dark: this.dark,
           disabled: this.disabled,
@@ -198,7 +198,7 @@ export default baseMixins.extend<options>().extend({
               e.stopPropagation()
             },
           },
-      }
+      }, extraData || {})
 
       return this.$createElement('div', {
         staticClass: `v-input__icon`,
diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
index 39b0921839a..8131d78d7d2 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.ts
+++ b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -25,7 +25,7 @@ import mergeData from '../../util/mergeData'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode, VNodeDirective, PropType } from 'vue'
+import { VNode, VNodeDirective, PropType, VNodeData } from 'vue'
 import { SelectItemKey } from 'types'
 
 export const defaultMenuProps = {
@@ -416,9 +416,10 @@ export default baseMixins.extend<options>().extend({
     },
     genIcon (
       type: string,
-      cb?: (e: Event) => void
+      cb?: (e: Event) => void,
+      extraData?: VNodeData
     ) {
-      const icon = VInput.options.methods.genIcon.call(this, type, cb)
+      const icon = VInput.options.methods.genIcon.call(this, type, cb, extraData)
 
       if (type === 'append') {
         // Don't allow the dropdown icon to be focused
diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
index 57f56dea66d..918cfc9b507 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
+++ b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
@@ -23,8 +23,8 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
         </div>
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--clear">
-            <button aria-hidden="true"
-                    type="button"
+            <button type="button"
+                    aria-label="clear icon"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear
@@ -83,8 +83,8 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
         </div>
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--clear">
-            <button aria-hidden="true"
-                    type="button"
+            <button type="button"
+                    aria-label="clear icon"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear
diff --git a/packages/vuetify/src/components/VTextField/VTextField.ts b/packages/vuetify/src/components/VTextField/VTextField.ts
index b203ad41533..2308b3f5b67 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.ts
+++ b/packages/vuetify/src/components/VTextField/VTextField.ts
@@ -294,14 +294,10 @@ export default baseMixins.extend<options>().extend({
     genClearIcon () {
       if (!this.clearable) return null
 
-      const icon = this.isDirty ? 'clear' : ''
-      const cb = this.isDirty ? this.clearableCallback : undefined
+      const data = this.isDirty ? undefined : { attrs: { disabled: true } }
 
       return this.genSlot('append', 'inner', [
-        this.genIcon(
-          icon,
-          cb
-        ),
+        this.genIcon('clear', this.clearableCallback, data),
       ])
     },
     genCounter () {
diff --git a/packages/vuetify/src/util/mergeData.ts b/packages/vuetify/src/util/mergeData.ts
index 95f00075d5f..fedfbb8c2fe 100644
--- a/packages/vuetify/src/util/mergeData.ts
+++ b/packages/vuetify/src/util/mergeData.ts
@@ -53,6 +53,9 @@ export default function mergeData (): VNodeData {
         case 'class':
         case 'style':
         case 'directives':
+          if (!arguments[i][prop]) {
+            break
+          }
           if (!Array.isArray(mergeTarget[prop])) {
             mergeTarget[prop] = []
           }
@@ -98,6 +101,9 @@ export default function mergeData (): VNodeData {
         // uses the last given value to assign.
         case 'on':
         case 'nativeOn':
+          if (!arguments[i][prop]) {
+            break
+          }
           if (!mergeTarget[prop]) {
             mergeTarget[prop] = {}
           }
@@ -124,6 +130,9 @@ export default function mergeData (): VNodeData {
         case 'staticStyle':
         case 'hook':
         case 'transition':
+          if (!arguments[i][prop]) {
+            break
+          }
           if (!mergeTarget[prop]) {
             mergeTarget[prop] = {}
           }

From 5c6ed543f9c8979bd4de196967bfd6574a6f0924 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 7 Feb 2020 01:32:16 +1100
Subject: [PATCH 3/3] refactor(VInput): use default argument instead of or
 operator

---
 packages/vuetify/src/components/VInput/VInput.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VInput/VInput.ts b/packages/vuetify/src/components/VInput/VInput.ts
index a84ef109677..6e9f73c0a47 100644
--- a/packages/vuetify/src/components/VInput/VInput.ts
+++ b/packages/vuetify/src/components/VInput/VInput.ts
@@ -167,7 +167,7 @@ export default baseMixins.extend<options>().extend({
     genIcon (
       type: string,
       cb?: (e: Event) => void,
-      extraData?: VNodeData
+      extraData: VNodeData = {}
     ) {
       const icon = (this as any)[`${type}Icon`]
       const eventName = `click:${kebabCase(type)}`
@@ -198,7 +198,7 @@ export default baseMixins.extend<options>().extend({
               e.stopPropagation()
             },
           },
-      }, extraData || {})
+      }, extraData)
 
       return this.$createElement('div', {
         staticClass: `v-input__icon`,