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

FileUpload v4: PassThrough for button in basic mode differs from documentation #5705

Open
sceee opened this issue May 8, 2024 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@sceee
Copy link

sceee commented May 8, 2024

Describe the bug

It is not possible to set the class attribute using passThrough for a FileUpload.

The class attribute is just not set when trying to set it via pt:choose-button:class="my-fancy-class".

EDIT:
Actually in the code I saw that - when using basic mode - the pt is mapped to the property "pcButton" which translates to pt:button:class.
So when using pt:button:class="my-fancy-class", it works as expected.
However, this is not described in the passThrough docs. As I am not sure whether this should be fixed in code or in the docs, I am leaving this issue open.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-udvmak?file=src%2FApp.vue

PrimeVue version

4.0.0-beta.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 124.0.6367.119, Edge 124.0.2478.80

Steps to reproduce the behavior

  1. Create a FileUpload with a passThrough to set the class for the ChooseButton
<script setup lang="ts"></script>

<template>
  <FileUpload
    mode="basic"
    name="demo[]"
    url="/api/upload"
    accept="image/*"
    :maxFileSize="1000000"
    @upload="onUpload"
    :auto="true"
    chooseLabel="Browse"
    pt:choose-button:class="my-fancy-class"
  />
</template>

<style>
.my-fancy-class {
  background-color: red;
}
</style>
  1. Check that the class is applied and visible in the DOM

Expected behavior

The class my-fancy-class is applied to the button element in the dom with the class p-fileupload-choose-button.

@sceee sceee added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 8, 2024
@sceee sceee changed the title FileUpload v4: PassThrough not working for chooseButton FileUpload v4: PassThrough for button in basic mode differs from documentation May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant