search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.82k stars 1.18k forks source link

TreeTable: Slot rowtoggleicon #6237

Open Elgorm opened 1 month ago

Elgorm commented 1 month ago

Describe the bug

Good day! When using the rowtoggleicon slot in TreeTable, the old icon does not disappear but appears next to it.

Reproducer

https://stackblitz.com/edit/kgbykx?file=src%2FApp.vue

PrimeVue version

4.0.4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome 127.0.6533.101

Steps to reproduce the behavior

<Column field="name" header="Name" expander style="width: 34%">
   <template #rowtoggleicon="{ expanded }"> > </template>
</Column>

Expected behavior

The icon indicated in the slot should remain.

WatCodeDatCode commented 3 weeks ago

When using the icon slot(s), it seems necessary to replace all icons within the slot for it to prevent the default from appearing.

It is also necessary to use an actual icon/image/etc and not just a character.

It seems StackBlitz also may cause issues. If you use a template like this locally, it should work: 

    <template #rowtoggleicon="{ expanded }">
        <img v-if="expanded" src="https://api.iconify.design/simple-line-icons/minus.svg" alt="">
        <img v-else src="https://api.iconify.design/simple-line-icons/plus.svg" alt="">
    </template>