How to get selected from Listbox

[jgreywolf]

We are using SkeletonUI in a sveltekit application. We are using skeleton components in other locations of our app, and those are all working great. However, I am super frustrated, because I keep thinking what I want to do should be easy - but the solution is just eluding me

Right now all I want to do is to get the selected items from a listbox. The end goal is to be able to move items between two listboxes.

Below is the code being used to render the listbox:

<ListBox
    bind:this={teamMembersListbox}
    bind:items={teamMembers}
    label="Team Members" 
    multiple>
        {#each teamMembers as item (item.id)}
            <div>{item.fullName}</div>
        {/each}
</ListBox>

In my ts code I am using the orgMembersListbox variable to hold the Listbox instance. When I try to access the getSelectedItems function, the error says there is no such function, and if I try to just access the selected property, I get the following:

Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'

I have tried setting the options as mentioned in error above, with no change

Is there any real documentation on how to use the components? Other than the super basic info here? https://www.skeleton.dev/components/listboxes

Thanks!

[Sarenor]

In my ts code I am using the orgMembersListbox variable to hold the Listbox instance. When I try to access the getSelectedItems function, the error says there is no such function, and if I try to just access the selected property, I get the following:

Neither this function nor the variable are shared in your code example, I have no idea what you're talking about.
There's always the Page Source button if you need more information:

You're code is also wrong, you need to use ListBoxItems inside a ListBox for them to be recognized as options for the list box.
There's no items you can bind to, you need to do a bind:group on every Listbox item.

I think you're on a very, very old beta version of Skeleton and need to check your version and update befor ethe docs have any relevance to you again.

[endigo9740]

@jgreywolf yeah I'm not sure where you pulled your code sample above from, this is not how Listbox components works. Check the official documentation page here:

https://www.skeleton.dev/components/listboxes

You'll see multiple previews on the page, like so:

Tapping the </> (read: code) icon near the top left corner will show a minimal example of how to generate that example:

If you're trying to monitor the state of multiple selected list items, then you'll want to use the "Multiple Selection" example here:
https://www.skeleton.dev/components/listboxes#multiple-selection

First you define an array that contains the values you wish to be highlighted on load. If you want none highlighted on load then provide an empty array:

// pre-populated on load
let valueMultiple: string[] = ['books', 'movies'];

// empty on load
// let valueMultiple: string[] = [];

IMPORTANT: the valueMultiple array will always contain the currently selected list items values.

Then construct your template using the Listbox and ListBoxItem Item parent/child components as follows:

<ListBox multiple>
    <ListBoxItem bind:group={valueMultiple} name="medium" value="books">Books</ListBoxItem>
    <ListBoxItem bind:group={valueMultiple} name="medium" value="movies">Movies</ListBoxItem>
    <ListBoxItem bind:group={valueMultiple} name="medium" value="tv">TV</ListBoxItem>
</ListBox>

You'll note the prop names like group, name, value may seem familiar if you've ever setup binding for a native radio or checkbox input in Svelte. This is because these components actually contain these types of inputs to maintain state under the hood.

If you need to loop through and generate ListBoxItem from a dynamic source, such as an array of data. You can do so as follows:

let mediumList = ['books', 'movies', 'tv'];
let valueMultiple: string[] = [];

<ListBox multiple>
    {#each mediumList as m}
    <ListBoxItem bind:group={valueMultiple} name="medium" value={m}>{m}</ListBoxItem>
    {/each}
</ListBox>

But note how ListBox always wraps the iterated ListBoxItem components here. And again valueMultiple will always contain the list of selected values.

[jgreywolf]

See I did look at that documentation, and wrote off the different way they were written as not being relevant. That should have been my first clue.

So, is the idea that when an item is selected it will be added to the valueMultiple variable? It does not seem to be populating for me when I select an item (the only real change from the code above being the items in the "mediumList" variable)

[endigo9740]

So, is the idea that when an item is selected it will be added to the valueMultiple variable

Correct, this should be updated. Can you share how you're checking the value? Something like this should show live values:

<pre>{JSON.stringify(valueMultiple, null, 2)}</pre>

Just drop that on the page with your ListBox.

Also check your console log and verify there are no errors on the page. Errors could be a sign of something else blocking this.

[jgreywolf]

It just shows an empty array ([])

I created a click event on a button so that I could step through debugger and check the value after select, and it is the same.

Also, no errors in browser console

[jgreywolf]

@endigo9740 Using your exact sample above, on v0.92.2, is not updating the variable on selection

I am trying to see if I can update to latest - however, first I have to find all of the breaking changes. Like, it doesnt appear there is a menu component anymore?

[Sarenor]

You are still in a very old beta version, meaning the docs are outdated and worthless to you.
I would suggest updating before you proceed, although be advised that you should go through the patch notes per version.
There were a couple of breaking changes leading up to 1.0.0, including to ListBoxes.

[Sarenor]

Correct on the Menu, it's called popup now (and needs floating-ui).
And is also going to undergo heavy refactoring.

[jgreywolf]

I am going with plain old HTML select element for now. After the feature we are working on now is complete we will switch focus to updating Skeleton and refactoring on our end

Thanks!

[Sarenor]

Good Luck!