Untie text field’s icon click enabling from the input one

I would like to implement an input field that can be unlocked by the user if needed.

Visually, I was thinking that the button should be either outside or inside the field but strongly linked to it.

To do so, I have been using the Vuetify Text Field’s append-outer-icon props :

The template :

<v-text-field
  v-model="message"
  :append-outer-icon="icon"
  @click:append-outer="locked = !locked"
  :disabled="locked"
></v-text-field>

And here is the script :

data: () => ({
  message: '',
  locked: true,
}),
computed: {
  icon () {
    return this.locked ? 'lock' : 'lock_open'
  }
},

Here’s the link to the Codepen : https://codepen.io/anon/pen/jQaJPK

However, the button cannot be clicked when the input is disabled.

Is there any way to have the button enabled while the input is not using this method or am I forced to separate the button and the input ?

Answer

You can override the CSS which prevents icon’s click events:

.v-input--is-disabled:not(.v-input--is-readonly) .v-icon.v-icon--disabled {
  pointer-events: auto;
} 

---

Or for additional customization you can put icon inside the append-outer slot (there is also append slot for “inner” HTML), add custom icon class and override CSS which prevents clicking.

<v-text-field
  v-model="message"
  :disabled="locked"
>
  <v-icon 
      slot="append-outer" 
      @click="locked = !locked"
      class="lock-button"
  >
    {{ icon }}
  </v-icon>
</v-text-field>

So then also you can add color="black" on v-icon for example so it doesn’t look disabled.

CSS:

.lock-button {
  pointer-events: auto;
}

Codepen