Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Assignees
Labels
C: VFileInput T: enhancement Functionality that enhances existing features

Comments

@12343954
Copy link

12343954 commented Apr 13, 2023

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

@Mohib834
Copy link
Contributor

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

@12343954
Copy link
Author

12343954 commented Apr 13, 2023

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
Copy link
Author

12343954 commented Apr 13, 2023

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.

@johnleider johnleider added C: VFileInput T: enhancement Functionality that enhances existing features and removed S: triage labels May 2, 2023
@johnleider johnleider added this to the v3.x.x milestone May 2, 2023
Reidemption added a commit to Reidemption/vuetify that referenced this issue May 2, 2023
@johnleider johnleider assigned johnleider and unassigned KaelWD Jan 17, 2024
@johnleider johnleider modified the milestones: v3.x.x, v3.7.0 (Odyssey) Jan 26, 2024
johnleider added a commit that referenced this issue Apr 15, 2024
resolves #17142

Co-authored-by: John Leider <john@vuetifyjs.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment