javascriptvue.jsvuejs3vuetify.jsvuetifyjs3

Vuetify 3 v-file-input, clickable chips


I want to use the v-file-input from Vuetify, but it seems there was a strange regression in Vuetify3 ?

In Vuetify 2, you can use the selection slot to custom the display of the selected files. This still works in both versions, as said in the documentation => V3, V2

But when I try to do a basic closable chip, the hover or click does not trigger at all, like the answer in this previous post in Vuetify2.

It seems the input always take priority over the chips, which are now in another element than the input itself, preventing any user interactions with the chips, like deleting one of 50 imported files. Or any basic hover events

Any workaround other than downgrading to Vuetify 2 ? Here's the playground i'm testing


Solution

  • You need some styles to do this behavior like in Vuetify2, because in Vuetify 3 input is position:absolute and is located on top of chips.

    <style>
      .v-field__field {
        height: 60px;
      }
      .v-field__input {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
    </style>

    Example here