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

[AlbertMN]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] 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

6. 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!

[yairEO]

I am unable to reproduce