yairEO/tagify

Manually update tag data after it was added

mzangari opened this issue ยท 4 comments

Hi, and thanks for this beautiful library!
I'm encountering an issue which i hope someone can help me solve here:
I'm trying to programmatically update the tags data properties after the "add" event.
My current behaviour is this:

When a user enter a new tag, i make an ajax call to store the newly added tag in database.

The call response contain the new tag record along with full properties.
What i'm trying to achieve is to update the tagify object with these additional properties (like the "id" value, which i need to be able to use in the remove event).

So far i was not able to do this.

I'm trying to use the replaceTag function passing the new data like this:
tagify.replaceTag(tagify.getTagElms()[e.detail.index],data.tag);
where data.tag is an object like this:

{
	id: "32"
	label: ""
	description: ""
	locked: "0"
	type: "device"
	value: "test"
	created_at: "2020-02-27 17:21:02"
	updated_at: "2020-02-27 17:21:02"
}

but this leads me to a notAllowed element.
Is there a way that i can accomplish this? What am i doing wrong?

I've built a very simple pen here that replicates this same behaviour:
https://codepen.io/mzed/pen/eYNWZPB

Thanks for any help!

After more digging:
i suspected this may have something to do with the fact that i dont allow duplicates: it seemed to me the new element was marked as notAllowed by the replaceTag method because it had the same "value" field. But then i've tried with a different "value" and it end up with the same notAllowed mark. So my issue still remains: how can i dynamically add properties to an already existing tag?
How "right" it is to tackle directly with the tagify.value and edit the properties directly there? I've tried something like this:
tagify.value[e.detail.index].id = data.tag.id
and the tagify.value array updates correctly. but if i later try to remove the newly added tag, the additional "id" property is not found anymore in the event detail.

I understand your need and I have been contemplating on the best approach to allow developers to easily update a tag's properties after it has been created.

Add __isValid: true property to your new data Object so it will force replaceTag method to skip re-validation.

Thank you @yairEO , your suggestion worked like a charm!