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

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

Explanation

Hi! Thanks for this library! I am fetching the tags with AJAX and I am having a weird issue. If I type some text and select a tag from the dropdown, then I can only remove that tag by pressing backspace; clicking on the "x" button doesn't do anything. However if I disable the onInput callback and just use a static whitelist, I can remove tags soon after adding them. I tried to reproduce it in a jsbin (https://jsbin.com/hatepopege/1/edit?html,js,output) but with that jsbin I can delete the tag soon after adding it even when it comes from an AJAX request. So I am not sure it is a bug or if there is something in my code that somehow interferes with Tagify, although I don't have much else going on.

Could you give me some pointers on how to investigate / find the cause of this issue?

Thanks!

ps. I don't see any errors in the console. It just seems that the click event on the x button doesn't work.

Hi @yairEO ,

I loved your library and would like to use it for all my projects which would have this requirement of Tags, but on my tryouts I have encountered an issue which may totally be due to my lack of understanding, but to clarify does this library support empty pattern?

I tried out a scenario with mode: 'mix' and added values for white-listing, and pattern to null etc. But if i don't set a valid pattern I am not getting the drop-down suggestions.

const tagify = new Tagify(document.querySelector('input[name=search-bar]'), {
            delimiters: null,
            tagTemplate: function (value, tagData) {
                return `
                <tag title='${value}'>
                    <x title=''></x>
                    <div>
                        <span class='tagify__tag-text'>${value}</span>
                    </div>
                </tag>`;
            },
            mode: 'mix',
            pattern    : /@/,
            whitelist: [
                { value: 'Afghanistan', code: 'AF' },
                { value: 'Åland Islands', code: 'AX' },
                { value: 'Albania', code: 'AL' },
                { value: 'Algeria', code: 'DZ' },
                { value: 'American Samoa', code: 'AS' },
                { value: 'Andorra', code: 'AD' },
                { value: 'Angola', code: 'AO' },
                { value: 'Anguilla', code: 'AI' },
                { value: 'Antarctica', code: 'AQ' },
                { value: 'Antigua and Barbuda', code: 'AG' },
                { value: 'Argentina', code: 'AR' },
                { value: 'Armenia', code: 'AM' },
                { value: 'Aruba', code: 'AW' },
                { value: 'Australia', code: 'AU' },
                { value: 'Austria', code: 'AT' },
                { value: 'Azerbaijan', code: 'AZ' }
            ],
            dropdown: {
                enabled: 1,
                classname: 'extra-properties',
                itemTemplate: function (tagData) {
                    return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
                        <span>${tagData.value}</span>
                    </div>`
                }
            },
            mapValueToProp: "code", // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
        });

Issue

When you post the data of the form that contains the Tagify input element, if you go back with the browser after posting the control content is not persisted when using Chrome (while it works with Firefox).

💥 Demo Page (your original/unmodified Codepen link)

It's not demostrable using Codepen only, as there must be a <form> element inside, anyway it happens also with your original Codepen link here:

https://codepen.io/vsync/pen/OJNVyQR

Steps to reproduce

1. Download the HTML from the Codepen link above
2. Edit the HTML file, enclosing the <input> element in a form and adding a Submit button. So:

<body translate="no" >
<form method="get" action="not-exists"> <!-- ADDED LINE -->
  <input name='tags'
  class='some_class_name'            
  placeholder='write some tags'      
  value='css, html, javascript, css' of Objects)
  data-blacklist='.NET,PHP'>
 <input type="submit" value="Submit"> <!-- ADDED LINE -->
</form> <!-- ADDED LINE -->
    <script src [...]

3. Open the modified page in Firefox, type some tags, push the Submit button (it leads to an error of course) then go back. Your tags are still there. CORRECT
4. Do the same with Chrome: after going back, the typed tags are not there and they're replaced with the <input> element original values. WRONG

Video demonstration

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

https://jsbin.com/nenoduxeli/edit?html,js,console,output

Explanation

• What is the expected behavior? Tags should match my regex

• What is happening instead? The plugin don't detect tag

• What error message are you getting? No one

I got this code

<script>
  var controller;
  var input = document.getElementById('element-tags-list');
  var tagify = new Tagify(input, {
      whitelist : [],
      duplicates: false,
      dropdown : {
          classname : "color-blue",
          enabled   : 3,
          maxItems  : 5
      }
  });

  tagify.on('input', onInput);

  function onInput( e ){
      var value = e.detail.value;
      tagify.settings.whitelist.length = 0;
      controller && controller.abort();
      controller = new AbortController();
      tagify.settings.whitelist = ['aaabc', 'aaacb', 'aaabb', 'bbbbc', 'cccbd', 'dddbe', 'eeec', 'fffcc'];
      tagify.dropdown.show.call(tagify, value);
  }
</script>

Explanation

When I press enter on a suggested item the library creates 2 tags and not one. Es.

• I write aa
• It suggest aaabc, aaacb and aaabb
• I use arrow key to choose aaabb and press Enter
• the library adds 2 tags: my original aa and the choosed aaabb

The same error if in the "onInput" function I use a more complex ajax call like:

fetch('ajax/tags-list.php?prefix=' + value, {signal:controller.signal})
  .then(RES => RES.json())
  .then(function(whitelist){
    tagify.settings.whitelist = whitelist;
    tagify.dropdown.show.call(tagify, value); // render the suggestions dropdown
  })

If I click the suggested item with mouse everything works well. If I put the suggested words directly in the object creation everything works well (with Enter key too).

Hello,

I'm behind a strange behaviour with the jQuery file.

After some investigation, I found this part of code in dist/jQuery.tagify.min.js file

        replaceMixStringWithTag: function(t, e, i, n) {
            return i && t && -1 != t.indexOf(e) && (n = this.createTagElem(i), this.value.push(i), t = t.replace(e, n.outerHTML + "⁠")), {
                s: t,
                tagElm: n
            }
        }

And I can't find why in the mix mode, the originalInput tags are rendered as tags + ⁠.

I think that ⁠ is used only in replaceMixStringWithTag() and addMixTag() methods and it's not used in another method. So I don't think that it's usefull somewhere.

The strange thing that I found is when I call loadOriginalValues()

        loadOriginalValues: function() {
            var t = this.DOM.originalInput.value;
            if (t) {
                try {
                    t = JSON.parse(t)
                } catch (t) {}
                "mix" == this.settings.mode ? this.parseMixTags(t) : this.addTags(t).forEach(function(t) {
                    t && t.classList.add("tagify--noAnim")
                })
            }
        }

Since the mix mode is enabled, the parseMixTags(t) method will be called

        parseMixTags: function(n) {
            var s = this;
            return n.split(this.settings.mixTagsAllowedAfter).filter(function(t) {
                return t.match(s.settings.pattern)
            }).forEach(function(t) {
                var e, i = t.replace(s.settings.pattern, "");
                s.isTagWhitelisted(i) && (e = s.normalizeTags.call(s, i)[0], n = s.replaceMixStringWithTag(n, t, e).s)
            }), this.DOM.input.innerHTML = n, this.update(), n
        }

In which, if we are using whitelisted tags, each tag text will be normalized in a JSON object and it will be rendered as a HTML tag using replaceMixStringWithTag(n, t, e) method.

Until now everything is OK.

Before continuing, let's take an example:

Input="Hello @homer how are you ?"

The rendered input will be Hello [Homer](x)⁠ how are ?.

This output will be set in DOM.input.innerHTML

Now the update() method will be called

        update: function() {
            this.DOM.originalInput.value = "mix" == this.settings.mode ? this.DOM.input.textContent : JSON.stringify(this.value)
        }

Since we are operating in mix mode, DOM.originalInput.value will take the DOM.input.textContent value.

But using the previous example, DOM.input.textContent value is Hello Homer⁠ how are ?. To be more precise it's value will be seen as "Hello Homer how are ?" but in hexadecimal (for the non visible characeters) it's "Hello Homer%20%60 how are ?"

And that's what's confusing me.

Because in my use-case, I managed to use a custom template

        tagTemplate : function(v, tagData){
          return `<tag title='${v}' contenteditable='false' spellcheck='false' value='${v}'>
                    <x title=''></x>
                    <div>
                        <span class='d-none'>@</span>
                        <span class='tagify__tag-text'>${v}</span>
                    </div>
                </tag>`;
        }

To keep the pattern character (@) in DOM.originalInput. So everytime I render the tags using loadOriginalValues() method, I will never lost my previously rendered tags.

But after seeing this strange behaviour, when loadOriginalValues() method is called the first time it will render the tags normally, but the second time loadOriginalValues() method is called, the previously rendered tags will be deleted and they will never be rendered because of that extra HTML code ⁠. And this is normal because Homer⁠ is not whitelisted.

From Wikipedia:

U+2060 WORD JOINER (HTML ⁠ · WJ): encoded in Unicode since version 3.2. The word-joiner does not produce any space, and prohibits a line break at its position.

So can I have any answer ?

Thank you

Best regards

Can someone please explain how to use this library with Angular.

When I add <tagify></tagify> inside component HTML I'm getting next error: `error NG8001: 'tagify' is not a known element:

1. If 'tagify' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ` I tried to import Tagify and TagifyService into modules and providers inside app.module.ts but still the same. I've searched the documentation and other issues but still don't see how to start using it in Angular app.

Hi,

In Safari for Mac, when adding a new tag, the cursor jumps to the start of the tag opposed to the end. This means when you start typing it actually types before the tag not after.

I don't mind doing a bit of self diag, but could you point me in the right direction? Might need some sort of timeout before re-positioning the cursor after the tag add function has completed.

--

It would also be great if you can add the option in mix mode of forcing a space after a tag when added. I know currently it adds a zero width space, but it would be of benefit to have a visual space to maintain formatting when tags are used within a sentence.

Thanks.

Ì'm trying to create new Tags, which should be pushed thereafter into the whitelist.

where does the check happen whether my new input is part of the white list or not? I'd have to change the code here.

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

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

Explanation

• What I'm going to do?

  I would like to use AJAX to load a lot of tags from a database when the user starts typing, allowing him to choose only from existing tags (hence with enforceWhitelist enabled) and, at the same time, post only a numeric ID of the selected tags back to the server with a custom separator, when the form is submitted.

  So if the whitelist is: [{value: 1, name: "Apple"},{value: 2, name: "Banana"},{value: 3, name: "Lemon"}] and my typed tags are Apple and Lemon, I would like the original text input value to be 1|3 (with the | separator).

  This works perfectly with a code similar to the linked demo page above (where I introduced a delay on the whitelist populating, to simulate the AJAX call). But there are some issues with this approach.

• What is happening instead?

1. With enforceWhitelist set to true I could initialize the textbox value with the value saved on the DB (e.g. Apple only) but to avoid tagify to autoremove the tag, I have to pre-populate the whitelist at the same time with at least the saved value (e.g. [{value: 1, name: "Apple"}]). This could be done, but the numeric value is not parsed by tagify and neither its separator (see this example variation); in a nutshell value="1|2" doesn't work while value="Apple,Banana" does.
2. ~Even if we don't consider the previous issue if I start with a blank whitelist (like the one in the JSBIN above), type a tag (which is accepted thanks to AJAX) post the form and then I go back using the browser, the tag is cleared because the whitelist starts blank. In this case I cannot apply #465 because I don't store the tags the user typed... how can this situation be handled? I see that Firefox v91 autocompletion works correctly by keeping the tags, while Microsoft Edge v92 / Chrome v93 when going back displays 1|3 for a brief moment and then the input is cleared of course, due to the empty whitelist.~ (EDIT: removed and opened a separate thread #898)

• What is the expected behavior?

1. Tagify should respect the originalInputValueFormat or provide another callback for the inverse function during the initialization. So tagify must be able to convert 1|3 into Apple, Lemon on its own using the whitelist (which still I must populate in advance; since it's not possible with AJAX probably I could pull it from the DB during the page initialization).
2. Tagify should implement an event to be handled (like add) that is fired only on the initialization of the control? This way I could ask the DB if for example 2|3 are valid tags and then populate the whitelist as a consequence? ~Another thing to consider is that you cannot initialize tagify with enforceWhitelist: false and then set it to true programmatically; this would allow to start with enforceWhitelist turned off, load the information about the tags and set it to true after the whitelist has been populated~. (EDIT: use tagify.settings.enforceWhitelist to enable it afterward; see example here)

Sorry for being quite long but I hope it's clear... basically the issues are during initialization of the tag values when using non-standard values (numeric ID instead of the names) and dealing with the browser going back with the input control already filled-in that gets cleared due to the missing whitelist (that cannot be fully loaded).

I have the latest version (2.22.3) and I have a code to initialize tagify:

this.tagify = new Tagify(emails, {
                delimiters          : ",| |:", 
                suggestionsMinChars : 3,
                maxTags             : 100,
                keepInvalidTags     : true,
                duplicates: false
            }
        );

If I paste lines like these, separated by new line symbol ('\n'):

[email protected]
[email protected]
[email protected]
[email protected]

And then click enter - it doesn't process text in a correct way: As you can see it adds "||" symbols.

Pasting works fine if I paste text separated by comma or whitespace.

Thanks.

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

You can see this behavior on the demo page itself when adding tags in the middle of a sentence in the mix-mode example. The caret position after a tag is added is always at the end of the input no matter where the tag is

https://yaireo.github.io/tagify/

I believe this behavior was broken by the change made for this previous issue as I tested on different versions to confirm.

https://github.com/yairEO/tagify/issues/1109 https://github.com/yairEO/tagify/commit/3860722afdc971ab58545d9c8f663af4d324dfd7

Previously, this was working correctly when selecting a suggestion with keyboard and not working when selecting using a mouse

Explanation

• What is the expected behavior? The caret position appears immediately after the added tag when selecting a suggestion either using a keyboard or a mouse

• What is happening instead? The caret position is always at end of input when adding a tag in mixed-mode

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

You can see this behavior on your own demo page (https://yaireo.github.io/tagify). Under your 'Easy to customize' demo, click the + to create an empty tag and paste some data into it. Then simply make the tag lose focus and the tag is cleared.

Explanation

• What is the expected behavior? Pasted data should become a valid tag.

• What is happening instead? Pasted data disappears.

• What error message are you getting? None

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

Can be done on the unmodified template as well, I've added extra padding and a border to show it better. https://jsbin.com/ruhotomezi/1/edit?html,js,output

Steps to reproduce

1. Open the above jsbin in firefox
2. click anywhere in .tagify to focus it
3. click again on .tagify but not on .tagify__input (aka the space between the actual input box and the outer .tagify)
4. Observe that .tagify__input lost its focus while .tagify is still focused
5. click anywhere else on the page to unfocus it
6. Observer that the .tagify--focus is still present on the .tagify element

Explanation

• What is the expected behavior? Clicking anywhere on the .tagify should focus the input

• What is happening instead? In Firefox, clicking on .tagify removes focus from .tagify__input, and the .tagify--focus class remains in the element even after losing focus.

• What error message are you getting? none

Notes

On browsers other than firefox clicking on .tagify keeps the focus on .tagify__input.

This can be especially annoying when .tagify__input doesn't take up the whole length of the input.

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

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

Explanation

Open in Safari 1.Type any text 2.Press Enter key - cursor moves to the next line 3.Press Enter key one more time or even more times - nothing happens

• What is the expected behavior? Empty lines added to a text
• What is happening instead? Nothing happens, cursor stays at the same position
• What error message are you getting? No errors

I think issue related with this part of code when I remove underlined string error gone

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

Hi Yair, just confirming whether the callback{} setting is supposed to work with the Jquery version or not? (as it currently doesn't).

This works new Tagify(inputId, {whitelist: blah, callback:{add: ()=>{console.log('blah')}}});

But this doesn't work $('#id').tagify({whitelist: blah, callback:{add: ()=>{console.log('blah')}}});

I realise you're not keen on the jquery version, but I'm preferring the jquery version as it permits access to the whitelist directly by whitelistTags = ($(inputId).data()).tagify.whitelist, instead of using a global variable var tagify = new Tagify and accessing tagify later.

Unfortunately using jquery callback with bind/on('change',callback) will trigger the callback twice, whereas using the javascript callback methodology works correctly.

Alternatively, is there a way to prevent the jquery callback on tag change triggering twice?

Cheers

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

React issue template: https://codesandbox.io/s/tagify-react-issue-template-4ub1r?file=/src/index.js

I am implementing tagify in my react app and I am building my custom dropdown and I want to add tags onClick on tags from my custom dropdown.

If this is not possible to add tags from custom dropdown then How can I access the tags list or array in which I can append on click in my custom dropdown.