Can I appoint on:remove to the slot to trigger?

[igorlanko]

I'm using a custom component to render the selected tags. It has its own isRemovable property and styling associated with it. I mean technically I could just copy the styling into the <Multiselect> style props, but for sake of keeping the same source of truth, let's assume I want to keep my own component to render the tag.

I am using Multiselect's on:remove event listener to trigger the form submission action. Is there a way I could do that from the child slot component instead? It does have its own on:remove, detail of which I can use to submit the form, but I'm not sure if I can account for the instant UI feedback how it's handled in the <Multiselect>, if that makes sense. Multiselect's event has much more in it.

Thanks

[janosh]

This is a bit vague. Can you post an actual code snippet of what you would like to do and why it's currently not working?

[igorlanko]

handleRemove is just a form.requestSubmit() wrapper. Then the form action processes the fields values.

const handleRemove = async (event) => {
  if (autoSubmitOnChange) {
    tagToRemove = event
    await tick()
    removeTagsForm.requestSubmit()
  }
}

Does the component not update if you reassign localAssignedTags in that callback?

No, not if the handleRemove() is called from the <Tag on:remove>. I'm assuming that's because <Multiselect>'s on:remove handles more behind the scenes, other than just forwarding the event.detail.option, doesn't it? My Tag's remove event just sends the contents of the option.

Which works fine for the form submission of course, but not for the client component selected?

[janosh]

You aren't reassigning localAssignedTags in handleRemove?

If you break it down, that's all this component's remove function does. I highlighted the relevant lines below:

// remove an option from selected list
function remove(to_remove: T) {
  if (selected.length === 0) return

+ const idx = selected.findIndex((opt) => key(opt) === key(to_remove))

+ let [option] = selected.splice(idx, 1) // remove option from selected list

  if (option === undefined && allowUserOptions) {
    // if option with label could not be found but allowUserOptions is truthy,
    // assume it was created by user and create corresponding option object
    // on the fly for use as event payload
    const other_ops_type = typeof options[0]
    option = (other_ops_type ? { label: to_remove } : to_remove) as Option
  }
  if (option === undefined) {
    return console.error(
      `Multiselect can't remove selected option ${JSON.stringify(
        to_remove
      )}, not found in selected list`
    )
  }

+ selected = [...selected] // trigger Svelte rerender

  invalid = false // reset error status whenever items are removed
  form_input?.setCustomValidity(``)
  dispatch(`remove`, { option })
  dispatch(`change`, { option, type: `remove` })
}

[igorlanko]

Forgot to mention: tagToRemove = event thing is also because the form that handles removal is a form with its own <input>s that are populated based on tagToRemove. So form wrapping the<Multiselect> fields is handling adding/creating the tags, but removal is handled separately. That's probably important, isn't it haha

[igorlanko]

Just saw your comment. Yep, not reassigning the updated list manually. I guess I could just call for invalidation after form's successful submission.

Or just find another approach altogether for the removal.

This is all hairy because in this context user is not preparing a form to submit, but rather submitting it on:change. So I need to know whether tag is being created, added, or removed on the fly. Because this change is sent to the server right away.

[igorlanko]

// remove an option from selected list
function remove(to_remove: T) {
  if (selected.length === 0) return

+ const idx = selected.findIndex((opt) => key(opt) === key(to_remove))

+ let [option] = selected.splice(idx, 1) // remove option from selected list

  if (option === undefined && allowUserOptions) {
    // if option with label could not be found but allowUserOptions is truthy,
    // assume it was created by user and create corresponding option object
    // on the fly for use as event payload
    const other_ops_type = typeof options[0]
    option = (other_ops_type ? { label: to_remove } : to_remove) as Option
  }
  if (option === undefined) {
    return console.error(
      `Multiselect can't remove selected option ${JSON.stringify(
        to_remove
      )}, not found in selected list`
    )
  }

+ selected = [...selected] // trigger Svelte rerender

  invalid = false // reset error status whenever items are removed
  form_input?.setCustomValidity(``)
  dispatch(`remove`, { option })
  dispatch(`change`, { option, type: `remove` })
}

I guess that's precisely what I'm trying to understand. If I could somehow trigger this behavior from the slot? Because otherwise it's not rerendering the selected list.