Support binding value

[etclub]

I hope bind:value is supported.

[gabrieldejesus]

@etclub
There's no support for it here it didn't work

[gabrieldejesus]

Any prevision @agustinl ?

[mstibbard]

It would be great if it supported bind:value directly.

Until then, you can work around it with something like:

function handleTags(event) {
  $form.tags = event.detail.tags;
}

...

<Tags
  on:tags={handleTags}
  ...
/>

I'm using above successfully with svelte-forms-lib.

[gabrieldejesus]

Thank you @mstibbard
I'm going to test something in this sense around here until there's this feature in the package

[agustinl]

Hi @etclub @gabrieldejesus @mstibbard

If I add bind:value to the input on component, you will see the tags added for the client on the input. The idea is add a tag and make the input blank to add another one.

You can use the following function:

<script>
let tag = "";

function handleTags(event) {
     tag = event.detail.tags;
}
</script>

<Tags
     on:tags={handleTags}
/>

Let me know if I can provide more help.

☺

[addiebarron]

@agustinl I think something like this handleTags function could be moved inside the Tags component to update a values prop on the component reactively. Then the component's parent could use a bind:values directive to get access to that reactive list of tags. It doesn't need to bind directly to an HTML value attribute. This would definitely be a nice & expected feature for a Svelte input component, and it would make integration with form libraries like svelte-forms-lib which use bindings for core functionality more straightforward and consistent!

[xmlking]

with new Sevelt Form Actions (https://kit.svelte.dev/docs/form-actions), we may not be able to use libs like svelte-forms-lib
it is hard to use without setting from input value to leverage progressively enhanced forms.

[xmlking]

a workaround may be to dispatch Custom Event with target, sothat handleTags method can set the value to target's form input element

https://svelte.dev/repl/c93cbf99a8ca4f44912e662a8e3cbef7?version=3.37.0

[agustinl]

Hello everyone! I created a PR with support for binding tags.

Will be very helpful your help to test if all works fine. From my side I saw all fine, but 4 eyes see better than 2

thanks for the patience 💪

[xmlking]

I tested. it worked as expected.

xmlking/svelte-starter-kit@9f52ad6

[xmlking]

@agustinl can you add default values or types to all exported values as I changed here: https://github.com/xmlking/svelte-starter-kit/blob/main/src/lib/components/Tags.svelte

this helps to make VSCode not to show imports RED

[agustinl]

Hi @xmlking I will add types support in other branch. Thanks for your help!