Tagify: Manually update tag data after it was added

Created on 27 Feb 2020  路  4Comments  路  Source: yairEO/tagify

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!

Help wanted

Most helpful comment

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

All 4 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Synchro picture Synchro  路  6Comments

pcolmer picture pcolmer  路  4Comments

danqing picture danqing  路  6Comments

raoul2000 picture raoul2000  路  6Comments

evsign picture evsign  路  7Comments