[Bug Report][3.4.3] @Click on v-chip in v-file-dialog not working

maxiwolleb commented 1 year ago

Environment

Vuetify Version: 3.4.3 Last working version: 2.7.0 Vue Version: 3.3.8 Browsers: Chrome 119.0.0.0 OS: Windows 10

Steps to reproduce

Generate element with @click in selection slot of v-file-input

https://play.vuetifyjs.com/#eNqVUkFOwzAQ/MrKHJJKNEHAAaGA4MIRIa5tDybdgFXHtmw3FYryd9Z20zYgJDjZHs+Md2e96JmzdfloTNFtkd2yymNrJPd4v1QAVTfnxsRtPNRaeS4U2j0UwUZInAtlth66eavXKO+WLIBuyeDWIl9rJT8JG7dLdpCTwfggnDmUWHuhFXF7CA7PvEUHw0RAkrXo6KlG2/1DgQZCHSXfBKn2D2HgoZai3pAsrlRfLbXjbxJBCrW57/vRYhiqMmn+5HT5f6uqpDZOgygn0SfoNF2CT1J3O+Hrj5PEj+mC5G8Rmszm9Zh+8E36cbShwMlsA5JGP6mLjq62wnhw6LepIdEabT30YLGBARqrW8joN2Xhklydj4NxcBcY+ULhDp4IyBerc8g8Oh+us9lqlhpMkrGdvarh0uGe0GxV/CaUOEWfz6BPXXCJ1udZRDPiAv2cH/TLHDtU/iCKp8J5bV6sNvydB2oe1b84VmWKgJpnwzm7Kq6KGxbW6+KCrb4AB54TAA==

Expected Behavior

trigger click of element inside slot

Actual Behavior

triggers click of v-file-dialog

Reproduction Link

https://play.vuetifyjs.com/#...

thieleju commented 11 months ago

Workaround for now: playground

<v-chip closable link @click:close="() => files.splice(index, 0)">{{fileName}}</v-chip>

<style>
  .v-file-input {
    .v-field__input {
      z-index: 1000001;
    }
    .v-chip__content {
      cursor: initial;
    }
    .chip__close {
      cursor: pointer;
    }
  }
</style>

maxiwolleb commented 4 months ago

Maybe reopen since its a bug?

maxiwolleb commented 3 months ago

@KaelWD Could you please take a look?

klimekszymon commented 2 months ago

@thieleju solution prevent v-file-input from drag and drop file

J-Sek commented 2 hours ago

Better workaround that does not prevent drag&drop:

.v-file-input {
  .v-field__input {
    z-index: 1;
    pointer-events: none;
    .v-chip {
      pointer-events: all;
    }
  }
}

But it also requires dragging detection in case user drops the file when pointing directly to the chip closing icon.

I don't think it is a bug. None of the example in docs show closable chips. It's just the limitation of current implementation. And actual support for this feature would rather be an enhancement. It could come with remove function from #selection slot binding and possibly slightly more reliable dragging detection.

But assuming, we get it implemented, I worry about actual usability. Misclicking is very easy and opens the system file dialog... annoying... unless we move the invisible <input type='file'> on top of the icon when there is at least one file... but adding new file removes existing chips, because this is how the native input works... The best UX is always a dedicated [Add file] button and a list of chips maintained separately. v-file-input is just a pretty wrapper for the native thing and forcing it to become something more is pointless in my opinion.

vuetifyjs / vuetify