Listen to on:delete event of some sort?

[igorlanko]

Hey first of all—this is the best multiselect plugin for Svelte. For the past few weeks I tried at least 5 different ones, and was able to get running with svelecte in minutes. So thank you!

But I'm curious about listening to the on:delete changes. In my case, user already lands on a list with a filled value array, and more options too. They can also create new options, and remove pre-selected tags.

Event from the on:change when clicked on a tag to delete it exposes the entire value array and not just the clicked tag. Is there a better way to do this other comparing value arrays (old vs new) and then pull out ids to then process for deletion?

[mskocik]

Hi, thanks for support!

Regarding your question. There is no such event (existing or planned) or another built-in way to determine what was deleted... So the way you are describing is the only way. And basically the correct one.
Svelecte is designed to be just a <select> element for your forms with better UX. That's why the API and event surface is quite small.

[github-actions]

This issue is stale because it has been open 21 days with no activity. Remove stale label or comment or this will be closed in 3 days.

[igorlanko]

Hi, thanks for support!

Regarding your question. There is no such event (existing or planned) or another built-in way to determine what was deleted... So the way you are describing is the only way. And basically the correct one. Svelecte is designed to be just a <select> element for your forms with better UX. That's why the API and event surface is quite small.

To be honest I've been struggling with creating the logic for this for a while since I want to post to the form action on:change.

Could you please give me a hint on how could I do that? I've been trying all sort of approaches, just can't figure it out:

let allTags = data.allTags
let assignedTags = data.assignedTags

let localTags = [...allTags]
let localAssignedTags = [...assignedTags]

let tagToRemove = {}

const handleChange = (event) => {
    // event.detail always returns the localAssignedTags array

    let tagsInQuestion = event.detail.map((tag) => ({
        ...tag,
	isSelected: localTags.some((localTag) => localTag.id === tag.id)
    }))
    
    // Find tags that were removed
    tagToRemove = assignedTags.find(
        (tag) => !tagsInQuestion.some((tagInQuestion) => tagInQuestion.id === tag.id)
    )
    
    if (tagToRemove) {
        console.log('-- tag was removed', tagToRemove.title)
    } else {
        console.log('++ tag was added', tagsInQuestion.title)
    }
    
    localAssignedTags = tagsInQuestion
}

<Svelecte
  options={localTags}
  bind:value={localAssignedTags}
  multiple={true}
  creatable={true}
  on:change={(event) => handleChange(event)}
  allowEditing={true}
>

The trouble with this one is that it never meets the tagToRemove condition. Here's a sort of a working repl https://www.sveltelab.dev/efd6psbixsri3ws?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte%2C.%2Fsrc%2Froutes%2F%2Bpage.server.js.

[mskocik]

Like this one... updated sveltelab.dev example

Basically you need to store also the previous selection. Also I think your functions to filter the tag added/removed were slightly off, so I did my own in the example. Hope it helps

[igorlanko]

Thanks for correcting the filtering function, @mskocik! Sorry if this is getting out of the library context itself, but even in your example the input values aren't being populated when there's a created or selected from the existing list tag added?

That's why I was initially thinking if splitting into on:create, on:add, and on:remove would make sense, because first two are a bit cumbersome to keep track of given that the component itself keeps track of the “current” bound array behind the scenes.

[igorlanko]

Re: value isn't populated, I think that was because we were checking if (tagToRemove) not if (tagToRemove.length > 0).

[mskocik]

To clarify... so my example is enough for you? Btw at least in the console you can always see items which were removed (in my example of course)

[github-actions]

This issue is stale because it has been open 21 days with no activity. Remove stale label or comment or this will be closed in 3 days.