Skip to content

Commit f8ee680

Browse files
committed
fix(VTextField): prevent tabbing to clear button
fixes #11202
1 parent 170c7d1 commit f8ee680

File tree

3 files changed

+10
-0
lines changed

3 files changed

+10
-0
lines changed

packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap

+7
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ exports[`VFileInput.ts should display file size 1`] = `
6161
<div class="v-input__icon v-input__icon--clear">
6262
<button type="button"
6363
aria-label="clear icon"
64+
tabindex="-1"
6465
class="v-icon notranslate v-icon--link material-icons theme--light"
6566
>
6667
$clear
@@ -107,6 +108,7 @@ exports[`VFileInput.ts should display file size 2`] = `
107108
<div class="v-input__icon v-input__icon--clear">
108109
<button type="button"
109110
aria-label="clear icon"
111+
tabindex="-1"
110112
class="v-icon notranslate v-icon--link material-icons theme--light"
111113
>
112114
$clear
@@ -153,6 +155,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
153155
<div class="v-input__icon v-input__icon--clear">
154156
<button type="button"
155157
aria-label="clear icon"
158+
tabindex="-1"
156159
class="v-icon notranslate v-icon--link material-icons theme--light"
157160
>
158161
$clear
@@ -202,6 +205,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
202205
<div class="v-input__icon v-input__icon--clear">
203206
<button type="button"
204207
aria-label="clear icon"
208+
tabindex="-1"
205209
class="v-icon notranslate v-icon--link material-icons theme--light"
206210
>
207211
$clear
@@ -294,6 +298,7 @@ exports[`VFileInput.ts should render chips 1`] = `
294298
<div class="v-input__icon v-input__icon--clear">
295299
<button type="button"
296300
aria-label="clear icon"
301+
tabindex="-1"
297302
class="v-icon notranslate v-icon--link material-icons theme--light"
298303
>
299304
$clear
@@ -340,6 +345,7 @@ exports[`VFileInput.ts should render counter 1`] = `
340345
<div class="v-input__icon v-input__icon--clear">
341346
<button type="button"
342347
aria-label="clear icon"
348+
tabindex="-1"
343349
class="v-icon notranslate v-icon--link material-icons theme--light"
344350
>
345351
$clear
@@ -433,6 +439,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
433439
<div class="v-input__icon v-input__icon--clear">
434440
<button type="button"
435441
aria-label="clear icon"
442+
tabindex="-1"
436443
class="v-icon notranslate v-icon--link material-icons theme--light"
437444
>
438445
$clear

packages/vuetify/src/components/VInput/VInput.ts

+1
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ export default baseMixins.extend<options>().extend({
184184
dark: this.dark,
185185
disabled: this.isDisabled,
186186
light: this.light,
187+
tabindex: type === 'clear' ? -1 : undefined,
187188
},
188189
on: !hasListener
189190
? undefined

packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap

+2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
2525
<div class="v-input__icon v-input__icon--clear">
2626
<button type="button"
2727
aria-label="clear icon"
28+
tabindex="-1"
2829
class="v-icon notranslate v-icon--link material-icons theme--light"
2930
>
3031
$clear
@@ -85,6 +86,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
8586
<div class="v-input__icon v-input__icon--clear">
8687
<button type="button"
8788
aria-label="clear icon"
89+
tabindex="-1"
8890
class="v-icon notranslate v-icon--link material-icons theme--light"
8991
>
9092
$clear

0 commit comments

Comments
 (0)