-
Notifications
You must be signed in to change notification settings - Fork 431
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Cannot read property 'insertBefore' of null #728
Comments
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? |
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. |
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. regarding adding unminified code, I will consider it (it bloats the package size considerably) |
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. |
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 |
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 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: |
There's apparently some race condition. For now you can do:
I will see what is the root cause of the problem and publish a patch |
Is there a reason you set your Tagify component to be a controlled component? ( |
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? |
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 |
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. |
There is already a ticket for 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 |
I am prepared to contribute money to do this. If I contribute to this project, can you add it? |
Never mind, I used the fix from: And that seemed to handle it. |
Prerequisites
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:
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!
The text was updated successfully, but these errors were encountered: