addMixTags throws 'Uncaught ReferenceError: tagElm is not defined'

[sisackov]

Description

In version 4.21.1, calling the addMixTags method throws an Uncaught ReferenceError: tagElm is not defined error.

Reproduction Steps

1. Call the addMixTags method.
2. Observe the error in the console.

Expected Behavior

The addMixTags method should execute without throwing an error.

Actual Behavior

An Uncaught ReferenceError: tagElm is not defined error is thrown. The error stack trace is as follows: Uncaught ReferenceError: tagElm is not defined at 8657.js:2:61085 at Array.forEach () at z.addMixTags (8657.js:2:60987)

Possible Solution

https://github.com/yairEO/tagify/blame/9bd64ed14cb951b27fb23e3bae2bef7f58128ee0/src/tagify.js#L1390 The error seems to originate from this line in the code. It appears that the correct line should be:

this.postProcessNewTagNode(newTagNode.tagElm, newTagNode.tagData)

[yairEO]

please provide an example. when are you calling it and which what parameters?

[yairEO]

I've created a test page (you should have reported a bug using a test page) and I do not see any error when calling the method addMixTags:

https://jsbin.com/xibukudave/1/edit?html,js,output

[pavel-nitka]

@yairEO this issue related to 4.21.2 version but jsbin uses 4.20.0 and addTags. If you will change version and will use addMixTags you will be able to see error

[yairEO]

@pavel-nitka - Your demo isn't configured for mix mode but you are using the addMixTags method nonetheless.

[sisackov]

Sorry @yairEO, initial issue lacked details.

The problem is with React MixedTags component. This is an approximate implementation of how we use it: CodeSandbox example

On clicking the button, the tag was added to the input. After upgrading to 4.21.1 this stopped working

[yairEO]

what "CodeSandbox example do you refer to? there is no link. please re-check

[sisackov]

what "CodeSandbox example do you refer to? there is no link. please re-check

https://codesandbox.io/p/sandbox/tagify-react-issue-template-forked-7hvxhs?file=%2Fsrc%2Findex.js

[yairEO]

You are correct, there is a bug.

But also your code is incorrect:

(1) You did not import Tagify correctly:

// good:
import { MixedTags } from "@yaireo/tagify/dist/react.tagify";

// bad:
import MixedTags from "@yaireo/tagify/dist/react.tagify";

(2) Your label variable has interpolation within the string which should not be there:

// good:
const label = "Level Name";

// bad:
const label = "{Level Name}";

(3) you cannot define the delimiters setting for the <MixedTags> component because it's not for mixed-mode

(4) there's already a setting for insertAfterTag and you should very much not call

tagifyRef.current.insertAfterTag(tagElem, " ");

yourself manually because it runs automatically for each tag added using the addMixTags() method

[sisackov]

Thanks for the pointers - I'll update my code accordingly. (is there a full documentation on how to use MixedTags? I mostly relied on code I found on the web).

[yairEO]

Everything I wrote in the README and the live demo CodeSandbox

If you have any question let me know