From f8ee680b1d78182852822fd12b63dd00a5803f40 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 10 Aug 2022 22:34:34 +1000
Subject: [PATCH] fix(VTextField): prevent tabbing to clear button

fixes #11202
---
 .../__tests__/__snapshots__/VFileInput.spec.ts.snap        | 7 +++++++
 packages/vuetify/src/components/VInput/VInput.ts           | 1 +
 .../VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap  | 2 ++
 3 files changed, 10 insertions(+)

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 46ff1ee5da7..8dbfc5dbba6 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
@@ -61,6 +61,7 @@ exports[`VFileInput.ts should display file size 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -107,6 +108,7 @@ exports[`VFileInput.ts should display file size 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -153,6 +155,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -202,6 +205,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -294,6 +298,7 @@ exports[`VFileInput.ts should render chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -340,6 +345,7 @@ exports[`VFileInput.ts should render counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -433,6 +439,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
diff --git a/packages/vuetify/src/components/VInput/VInput.ts b/packages/vuetify/src/components/VInput/VInput.ts
index 5b5f21845f7..6fa1c3831cc 100644
--- a/packages/vuetify/src/components/VInput/VInput.ts
+++ b/packages/vuetify/src/components/VInput/VInput.ts
@@ -184,6 +184,7 @@ export default baseMixins.extend<options>().extend({
           dark: this.dark,
           disabled: this.isDisabled,
           light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined,
         },
         on: !hasListener
           ? undefined
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 2accd1716a6..1f1245df162 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
@@ -25,6 +25,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear
@@ -85,6 +86,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear