Bug: Cannot read property 'insertBefore' of null

[gravitymedianet]

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

https://codesandbox.io/s/bold-hugle-ql2uv?file=/src/App.js

Explanation

Should add a tag without errors, should place cursor at the end of the input

Console reports:

When you select your tag and hit enter:

tagify.min.js:1 Uncaught TypeError: Cannot read property 'insertBefore' of null
    at f.insertAfterTag (tagify.min.js:1)
    at tagify.min.js:1

Also, the caret jumps to the beginning of the field.

As a side note, please consider adding the non-minified code to your distribution, as well as Typescript declarations. It has been a nightmare getting this running in my TS environment!

[yairEO]

Was was it a nightmare integrating?

How do you import and use any other of the thousands of 3rd-party open source packages in vanilla js?

[gravitymedianet]

Hi, I duplicated this issue by accident because of a 404 error. I closed this, but I am reopening it since you replied to this one.

It was a nightmare getting the types to work. I am using React not vanilla js. I had to find a typescript declaration for this package but it is not officially accepted, and seems to not be current anymore. It would be nice to have the typescript and non-minified versions in your distribution. The only thing there are minified files. Very hard to work with as I could not debug the above error because it is minified.

[yairEO]

My question was how is this different than any other 3rd party vanilla package you are using.

I don't know what "nightmare getting the types to work." means.
I don't know typescript at all. What actually did you try to do which you had issues with?

regarding adding unminified code, I will consider it (it bloats the package size considerably)

[gravitymedianet]

I don't use any other vanilla package so I am not sure. I am using the React wrapper. You cannot even use your package with a Typescript React project because it throws a warning that there are no types defined. To use a package in Typescript, you have to define a file which strongly types your Javascript package. The declaration file tells the editor the shape of each object, what functions return etc., so that you can have strongly typed code. So I had to find a declaration file to make it work. But the declaration file had 2 or 3 errors itself so I had to modify it myself. However this was almost impossible because the code is minified so I cannot see what your functions return, etc.

Finally, when I got it to work, I got this insertBefore error which is the subject of this ticket.

[yairEO]

I am against typed code. I like javascript because it is not typed, and that gives me power to do whatever I want, re-use variables or drop any type I want to the same variable, and have the code be smart enough to work.

Here, I just Googled for you some workarounds (took couple minutes):

https://stackoverflow.com/a/55795394/104380
https://stackoverflow.com/q/35869323/104380
microsoft/TypeScript#3019 (comment)

[gravitymedianet]

Thanks, however my ticket is not about typescript. It is about the bug when using the package. The "caret" jumps to the beginning and you get the warning:

tagify.min.js:1 Uncaught TypeError: Cannot read property 'insertBefore' of null
at f.insertAfterTag (tagify.min.js:1)
at tagify.min.js:1

I already solved the typescript issue, as I mentioned earlier. I provided a link above to show the issue. I will paste it below here for convenience:

https://codesandbox.io/s/bold-hugle-ql2uv?file=/src/App.js

[yairEO]

There's apparently some race condition. For now you can do:

setTimeout(setFieldVal, 0, e.target.value)

I will see what is the root cause of the problem and publish a patch

[yairEO]

Is there a reason you set your Tagify component to be a controlled component? (value prop is determined by React useState)

[gravitymedianet]

I am not using state in my actual code. I just copied your React example for the demo.

The console error is now gone with your suggestion, thanks.

Another question--the caret continues to go to the beginning of the field. Is there a way to make the caret jump to the end?

[yairEO]

You don't need my suggested fix any longer since I've fix the error

the caret jumps because you are using Tagify as a controlled component, and in mix-mode this has a side-effect for doing that... this is why i've asked why did you use it as a controlled component. I did not create any demo for mix-mode which is controlled, this is the reason I asked "why" earlier.

Do not feed-back the value to the Tagify component, let it handle the DOM by itself (because it's a vanilia component).

The onChange is meant to sync the changes with the server, but not for re-feeding the value prop

[gravitymedianet]

I updated my package with your lasted changed, thank you.

I see what you mean about the value. However, in my app, I am updating an object that needs to be sent back to the server and one of the fields is updated by this tag component.

I looked to see if there was a defaultValue prop, but I do not see one (did not work). I will submit a feature request for this.

[yairEO]

There is already a ticket for defaultValue for React, I will work on it soon.

I have many other open source projects here on Github which I am working on and since Tagify is pretty stable, I divide my time mainly to the newer projects and even one which are not yet published, I am just a single person and doing open-source full-time with nobody paying, simply because I love creating things