Listbox trail only visible on hover

[tymon3568]

Hi all,
i don't know how to make a trail only visible on hover the ListBoxItem?
Hope someone can help me. Thank you.
my code:

<ListBox active="variant-filled-primary">
                    {#each people as person}
                        <ListBoxItem bind:group={currentPerson} name="people" value={person} >
                            <svelte:fragment slot="lead">
                                <Avatar src="https://i.pravatar.cc/?img={person.avatar}" width="w-8" />
                            </svelte:fragment>
                            
                            <div class="ml-4 flex-1">
                                <div class="flex items-bottom justify-between">
                                    <p class="">
                                        {person.name}
                                    </p>
                                    {#if !hoverList}
                                    <p class="text-xs ">
                                        12:45 pm
                                    </p>
                                    {/if}
                                </div>
                                <p class="text-grey-dark mt-1 text-sm">
                                    I'll be back
                                </p>
                            </div>
                            <svelte:fragment slot="trail">
                                <p>...</p>
                            </svelte:fragment>
                        </ListBoxItem>
                    {/each}
                </ListBox>

[endigo9740]

@tymon3568 they should just be visible by default, no special effort. Can you confirm what version Skeleton you're running and how it was setup (CLI/manual) please

[tymon3568]

"@skeletonlabs/skeleton": "^1.8.0", and setup by CLI
they should just be visible by default, no special effort. : i mean, by default i want my trail invisible. When i hover on ListBoxItem, the trail of ListBoxItem will be visible. i can't use something like this:

 <ListBoxItem bind:group={currentPerson} name="people" value={person} on:mouseenter={() => hoverList = true} on:mouseleave={() => hoverList = false} >

[endigo9740]

Oh I see, I misread earlier. In that case you'll want an if statement wrapping the content within your slot. Then use your mouse events to update the condition - which you look to be doing. If the if statement is false the content won't render and the slot should not display

[Mahmoud-zino]

@endigo9740 ListBox & ListBoxItem are not forwarding on:mouseenter and on:mouseleave, so he can't do that or at least this is what I understood...

[endigo9740]

This is correct, we only forward the keydown, keyup, and keypress events currently. I'd suggest putting in a feature request if you wish for this to be expanded or consider submitting a PR that updates this. As a temporary solution you may be able to wrap each listbox item in a div and add the events there.