svelte-tags-input
svelte-tags-input copied to clipboard
Support binding value
I hope bind:value
is supported.
@etclub There's no support for it here it didn't work
Any prevision @agustinl ?
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
.
Thank you @mstibbard I'm going to test something in this sense around here until there's this feature in the package
Hi @etclub @gabrieldejesus @mstibbard
If I add bind:value
to the input on <Tags> 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.
☺
@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 bind
ings for core functionality more straightforward and consistent!
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.
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
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 💪
I tested. it worked as expected.
https://github.com/xmlking/svelte-starter-kit/commit/9f52ad68b870a5a4a454186e2a2a1943520ebe86
@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
Hi @xmlking I will add types support in other branch. Thanks for your help!