New option for taglist to add new values by comma or space

[skuhnow]

I have a taglist
<FormKit type="taglist" label="Merkmale" name="tags" :value="guest.tags" :allow-new-values="true" />
when I enter a value, I expected a new value after pressing , or space or onBlur. But it only adds the value when I press return

Maybe something like :createWithSpace="true"

[mr-boost]

I am also facing the same situation, in order to improve the UX for users, they expect a new tag to be added after a click outside the component without necessarly requiring an explicit press on return (same as tagify's behavior)

[sashamilenkovic]

Hey! @skuhnow @mr-boost. In retrospect, I think this prop should've not been a prop, haha. Everyone is gong to have their own expectations for this behavior, and making a prop that can accept every variation of "how to create a new tag" would make for a bloated api. Here's an example of using a FormKit plugin and higher order functions to customize the behavior of adding a new tag.

https://formkit.link/6cd18865ec9c13121ba503c4ecc6b925

Not sure this perfectly matches your use-cases, but hopefully it's helpful to see how you can implement this yourself.

[mr-boost]

WoW! Thank you so much Sasha, this works great. I ended up adapting it slightly to Typescript (sharing it below if it helps anyone) and I have kept :allow-new-values="true" in order to keep the tag list enabled even when there are no options. Thanks again! function allowNewValues(node: FormKitNode) { node.on('created', () => { if (node.context) { const hofBlur = node.context.handlers.blur node.context.handlers.blur = (e?: FocusEvent) => { if (node.props.inputText) node.input([...(Array.isArray(node.value) ? node.value : []), node.props. inputText]); hofBlur(e) } const hofKeydown = node.context?.handlers.keydown node.context.handlers.keydown = (e: KeyboardEvent) => { if ( (e.key === 'Enter' || e.key === ',') && node.props.inputText ) { e.preventDefault() node.input([...(Array.isArray(node.value) ? node.value : []), node.props. inputText]); } hofKeydown(e) } } }) }

…

On Wed, Jan 17, 2024 at 3:45 PM Sasha Milenkovic ***@***.***> wrote: Hey! @skuhnow <https://github.com/skuhnow> @mr-boost <https://github.com/mr-boost>. In retrospect, I think this prop should've not been a prop, haha. Everyone is gong to have their own expectations for this behavior, and making a prop that can accept every variation of "how to create a new tag" would make for a bloated api. Here's an example of using a FormKit plugin and higher order functions to customize the behavior of adding a new tag (notice I removed the allow-new-values prop from the taglist input entirely). https://formkit.link/6cd18865ec9c13121ba503c4ecc6b925 Hope this helps. — Reply to this email directly, view it on GitHub <#1092 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEN46DVKBBTLVVGCDYI2IBDYO7IWJAVCNFSM6AAAAABA7RXAGSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCNJXGA2TE> . You are receiving this because you were mentioned.Message ID: ***@***.***>