Programmatically adding tags in mix-mode throws an error

[gpetrov]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

got JS error:

When using addTags, like:

TAGIFY.addTags([{id: "query.aa", title: "query.aa", value: "query.aa"}])

[cleversonmv]

https://codesandbox.io/s/tagify-react-wrapper-forked-1e87b?fontsize=14&hidenavigation=1&theme=dark

Click Add on MixedMode

[yairEO]

Thank you, I will fix it soon.

May I ask why do you wish to add a tag this way and not the "react" why - by updating the value prop of the Tags component?

[cleversonmv]

Thank you, I will fix it soon.

May I ask why do you wish to add a tag this way and not the "react" why - by updating the value prop of the Tags component?

Updating by value return String empty "" in the onChange, after updating the value

[yairEO]

Still need help? on the React demo page, tagify works good when updating the value prop

[yairEO]

addTags is not meant for mix mode, sorry, I will add this to the docs

[gpetrov]

So how do you add tags programmatically in mixed mode @yairEO ? Maybe also specify insert position?

[yairEO]

There is a way, now I remember:

See my last comment here:
#524

[gpetrov]

Thanks that is nice but it is much more logical just to extend the addTags to work with mixed mode.

You can then detect if there is a caret position and use it, or insert at the end. Or if another tag is selected add after it or replace.

Such functionality should be just in the core so we shouldn't have to program it each time we need a tag inserted.

[yairEO]

what do you mean by "another tag is selected"? in what way can a tag be selected?

How important is this to your project?

[gpetrov]

Oh sorry i added this programically myself 😀 very useful though when you want to edit a specific tag in external UI - it can have a "selected" state (done with css border for example) and then user can hit some edit button

[yairEO]

I've made the adjustment, per your request, to have addTags method work in mix-mode.

Once I deploy the new version, calling addTags will add a tag to the end of the Tagify component, as the last element, if there was no previous selection by the user (focused & places the caret somewhere which isn't the end of the contenteditable).

If previous selection detected, the tag-to-be-added will be added to that selection (using the selection's range as a guide where it should be placed it)