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

TreeTable: Slot rowtoggleicon #6237

Open
Elgorm opened this issue Aug 15, 2024 · 1 comment
Open

TreeTable: Slot rowtoggleicon #6237

Elgorm opened this issue Aug 15, 2024 · 1 comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Elgorm
Copy link

Elgorm commented Aug 15, 2024

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.

@Elgorm Elgorm added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Aug 15, 2024
@WatCodeDatCode
Copy link
Contributor

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>

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

2 participants