Skip to content
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

Unaltered "Mix Text & Tags Example" tagifying issues: t.closest is not a function #1433

Open
3 tasks done
AlbertMN opened this issue Jan 10, 2025 · 0 comments
Open
3 tasks done

Comments

@AlbertMN
Copy link

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

💥 Demo Page

The pure, unedited "Mix Text & Tags" example from https://yaireo.github.io/tagify/; https://codepen.io/vsync/pen/KKzpdxQ. Also reproduced locally, with latest NPM version and CDN links from README.

Explanation

Hi there :) I'm brand new to the Tagify game, and holy crap it's a cool project! I've been thinking about adding something like this to spice up the search for a project of mine, and this seems to be perfect.

I didn't get to go too deep down the rabbit hole before I was stopped by this bug, though. First I thought it was an issue with my code, so in my journey towards a minimal reproducible example, I ended up reproducing with no changes whatsoever to the example that is linked to on the examples page. It also happened in my own examples with different patterns, so, my guess is that it's related to the "mix" mode.

The thing is that it doesn't seem to happen on the actual examples page, but with the Codepen that it links to, it does.

  • What is the expected behavior?
    When writing in a mix mode field, I expect to be able to use tab and enter to add items

  • What is happening instead? & What error message are you getting
    It doesn't "tagify", and I get the JS error in the console;

Uncaught TypeError: t.closest is not a function
    at Y.b (tagify:34:3682)
    at Y.m (tagify:34:3434)
    at tagify:34:45724
    at NodeList.forEach (<anonymous>)
    at tagify:34:45329
    at Array.forEach (<anonymous>)
    at Y.onInputDOMChange (tagify:34:45295)

Looking into the code, it is the line; return (null == t ? void 0 : t.closest(this.settings.classNames.namespaceSelector)) === this.DOM.scope in the helper function isNodeBelongsToThisTagifyInstance that ends up failing, but what goes wrong earlier on to result in this failing, I do not know.

Steps:
It's quite easy to reproduce.

  1. Go to https://codepen.io/vsync/pen/KKzpdxQ
  2. Click anywhere in the input/textarea; whether in the beginning, middle or end
  3. Enter # or @, followed by any text (short or long, example; #test)
  4. Click enter or tab on your keyboard
  5. First off there's a warning in the console;
[Tagify]: TypeError: Cannot read properties of undefined (reading 'getAttribute')
    at tagify:34:9865
  1. Click around a bit, try some more, and it ends up giving the t.closest JS error described above ^

Thanks again for this super cool project! I can't imagine, given that I'm using the unedited example, that this one can be counted as a user error on my end (it's nice to be semi-secure in that lol), given that I'm using the unaltered example from the example page. But, it's entirely possible that the example includes an error somehow, and the core has no errors. Again; it seems to work on the example page, which should use the same code - but maybe a different version...?

Any help is much appreciated.
Have a good weekend y'all!

@AlbertMN AlbertMN changed the title "Mix Text & Tags Example" issues: t.closest is not a function Unaltered "Mix Text & Tags Example" tagifying issues: t.closest is not a function Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant