ClickCell event fired twice when Component is clicked

[M4rk3tt0]

Hi, I'm using svelte-table with Skeleton UI and I have the Slide Toggle component in one of my columns.

When I click on a cell that contains this component, I can see in the console that the ClickCell event fired twice.

Here is a minimal stack that reproduces the issue.

[dasDaniel]

Thanks for submitting this issue.

I'll have to do more testing to figure out why this is happening. It seems like the event is triggered from both sources, the td element and the component is propagating it too.

This might work to you as a workaround for the time being.

<script lang="ts">
    import { SlideToggle } from '@skeletonlabs/skeleton';
    export let row: any;
    export let col: any;
    function onClick(e) {
        e.stopPropagation();
    }
</script>

<SlideToggle
    name={row.id}
    label={col.Title}
    bind:checked={row.status}
    size="sm"
    active="bg-secondary-500"
    on:click={onClick}
/>

[M4rk3tt0]

Thank you for your reply!

Your workaround stopped the propagation, but then I noticed that the event was firing even if i didn't click directly on the toggle (of course it would fire inside the whole area of the cell, because that's what it's supposed to do...).

I was thinking of passing an event in the props but I saw that's not possible, as stated here #110

So I had to change direction and use a svelte store, like this.

[dasDaniel]

you could also pass a function to your component as a prop

page:

const handleClick = (row, col)=>{
    console.log(row, col)
}

const columns = [
    {
        key:'id',
        title:'ID',
        value:(v)=>v.id
    },
        {
        key:'title',
        title:'Title',
        value:(v)=>v.title
    },
        {
        key:'status',
        title:'Status',
        value: (v) => Number(v.status),
        renderComponent: {
            component: ToggleSlide,
            props: { handleClick }
        }
    }
]

component:

<script lang="ts">
    import { SlideToggle } from '@skeletonlabs/skeleton';
    import { toggle } from '$lib/stores'

    export let row;
    export let col;
    export let handleClick = ()=>{}
</script>

<SlideToggle
    name={row.id}
    label={col.Title}
    bind:checked={row.status}
    size="sm"
    active="bg-secondary-500"
    on:change={()=>handleClick(row, col)}
/>

Ideally, you'd be able to pass an event listener, but as referenced, that's not possible at this time. So for now I'll be closing the issue since it seems to be working as expected.