vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Bug Report][3.1.14] <v-file-input :hide-input="true" /> can not hide to input

Open 12343954 opened this issue 1 year ago • 3 comments

Environment

Vuetify Version: 3.1.14 Vue Version: 3.2.47 Browsers: Edge 112.0.1722.39 OS: Windows 10

Steps to reproduce

    <v-form style="width: 50%; margin: 0 auto">
      <v-file-input
        class="fileInput"
        label="Select a image"
        accept="image/*"
        :hide-input="true"
        :clearable="false"
        prepend-icon="mdi-camera"
      >
      </v-file-input>

both setting :hide-input="true" or hide-input="true" are not works at all.

Expected Behavior

hide input field

Actual Behavior

can not hide the input field

Reproduction Link

https://codesandbox.io/s/wonderful-glade-m06big?file=/src/components/HelloWorld.vue

image

12343954 avatar Apr 13 '23 12:04 12343954

I don't see any prop like hide-input mentioned in vuetify latest docs. https://vuetifyjs.com/en/api/v-file-input/#props

Mohib834 avatar Apr 13 '23 18:04 Mohib834

sorry, my mistake! hide-input is in V2 https://v2.vuetifyjs.com/en/components/file-inputs/ not in V3 https://vuetifyjs.com/en/components/file-inputs/.

12343954 avatar Apr 13 '23 22:04 12343954

Temporary solutions:

<style scoped lang="less">
.fileInput {
  ::v-deep {
    .v-input__control {
      display: none;
    }

    // .v-input__details{
    //   display: none;
    // }
  }
}
</style>

image

but still hope the official support for this attribute hide-input in V3.

thanks.

12343954 avatar Apr 13 '23 23:04 12343954