fix: use a button element for clickable icons

[KaelWD]

Description

fixes #10265
fixes #10391
fixes #10398
Icon color specs: https://material.io/design/iconography/system-icons.html#color

Markup:

<template>
  <div class="ma-12 pa-12">
    <v-container fluid>
      <v-row>

        <v-col cols="12">
          <v-rating></v-rating>
        </v-col>

        <v-col cols="12">
          <v-autocomplete
            v-model="value"
            :items="items"
            @click:append="console.log('click')"
            dense
            filled
            label="DropDown Focus Bug"
          ></v-autocomplete>
        </v-col>

        <v-col
          cols="12"
          sm="6"
        >
          <v-text-field
            disabled
            :append-icon="mdiVuetify"
            label="Foobar"
            @click:append="show1 = !show1"
          ></v-text-field>
        </v-col>

        <v-col
          cols="12"
          sm="6"
        >
          <v-icon
            @click="onClick"
            v-text="mdiVuetify"
          ></v-icon>
          <v-text-field
            v-model="password"
            :append-outer-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.min]"
            :type="show1 ? 'text' : 'password'"
            name="input-10-1"
            label="Normal with hint text"
            hint="At least 8 characters"
            counter
            @click:append-outer="onClick"
          ></v-text-field>
        </v-col>

        <v-col
          cols="12"
          sm="6"
        >
          <v-text-field
            :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.min]"
            :type="show2 ? 'text' : 'password'"
            name="input-10-2"
            label="Visible"
            hint="At least 8 characters"
            value="wqfasds"
            class="input-group--focused"
            @click:append="show2 = !show2"
          ></v-text-field>
        </v-col>
        <v-col
          cols="12"
          sm="6"
        >
          <v-text-field
            :append-icon="show3 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.min]"
            :type="show3 ? 'text' : 'password'"
            name="input-10-2"
            label="Not visible"
            hint="At least 8 characters"
            value="wqfasds"
            class="input-group--focused"
            @click:append="show3 = !show3"
          ></v-text-field>
        </v-col>
        <v-col
          cols="12"
          sm="6"
        >
          <v-text-field
            :append-icon="show4 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.emailMatch]"
            :type="show4 ? 'text' : 'password'"
            name="input-10-2"
            label="Error"
            hint="At least 8 characters"
            value="Pa"
            error
            @click:append="show4 = !show4"
          ></v-text-field>
        </v-col>

      </v-row>
    </v-container>
  </div>
</template>

<script>
  // Icons
  import {
    mdiVuetify,
  } from '@mdi/js'
  export default {
    data () {
      return {
        mdiVuetify,
        value: null,
        items: ['foo', 'bar', 'fizz', 'buzz'],
        show1: false,
        show2: true,
        show3: false,
        show4: false,
        password: 'Password',
        rules: {
          required: value => !!value || 'Required.',
          min: v => v.length >= 8 || 'Min 8 characters',
          emailMatch: () => ('The email and password you entered don\'t match'),
        },
        console,
      }
    },
    methods: {
      onClick (e) {
        // e.preventDefault()
        // e.stopPropagation()
        // e.returnValue = false
        // e.cancel = true
        this.show1 = !this.show1
        console.log('here 1')
      },
    },
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

[TravisBuddy]

Hey @KaelWD,
Your changes look good to me!

View build log

TravisBuddy Request Identifier: 155af020-4792-11ea-9b02-35c319a1fc79