Tagify: Click "enter" on suggested list, only when data comes from external function, duplicate the tag

[gspawn]

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).

[yairEO]

I will look into it ASAP. Thanks

[yairEO]

I am unable to reproduce this bug

[gspawn]

The zip contains the video of issue.
I write "sc", it suggest "science", I select "science" and hit "enter". I got 2 distinct tags, not only one.
If I click the suggested "science" with mouse button everything works well.
I hope this help.
tagify.zip

[yairEO]

Which Browser/OS are you using and version of Tagify?

Does this happen in the demo page as well?

[gspawn]

Browser don't matter, it happen with chrome, firefox or safari as well...

No, because in the demo page all the examples have the whitelist in the object initialization.
This problem appear only when you initialize an empty whitelist and then charge it calling an external function (using tagify.settings.whitelist).

It seems that when we use tagify.on('input', onInput); on the onInput function we need to reset user's insert before create a tag suggested from the list when he press Enter...

[yairEO]

I've made a demo trying to reproduce it but I am unable:

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

In the demo you'll see a mocked AJAX function that returns a promised in a 1s delay, which should mimic a real server response, sending back whitelist array as the user types.

Try typing a and wait, then, lick the arrow down key and then enter to select a dropdown item. It will be added once.

[yairEO]

@gspawn - does it happen for you as well in the demo I've set up in my previous comment?

[gspawn]

@yairEO to reproduce check my simple demo:
https://jsbin.com/sohagicefa/edit?html,js,output

I found that if you set the option enabled : 3 the problem exist
If you set the dropdown option without enabled : 3 everything works.

So, I hope you can reproduce this issue

[yairEO]

everything works well for me in your demo.. with or without the enabled:3.

That setting means nothing if you are calling tagify.dropdown.show by yourself on the onInput event callback, so you are forcing the dropdown to render regardless of how many characters were typed

Try checking this on another computer or on a different browser (with incognito) and let me know

[gspawn]

It is impossible!! I've tryed with Brave, Chrome, Firefox and Safari (on Mac)!!!
Reproduce from my link this behaviour:
1) set focus on field
2) enter "aa" (you will got 3 suggestions)
3) press arrow down (doesn't matter, one, two or three times)
4) press "enter"

---> you will receive 2 tags "aa" and "aaabb"!!!

[yairEO]

Now I see the bug. very odd. I will examine carefully now that it happens all the time. I don't know why I didn't see it before, sorry

[gspawn]

Ok, thank you!
:-))))

[yairEO]

But why are you using enabled:3 ? I just don't understand.. you simply need to remove this if you want this bug to disappear.

I was looking into the code and it is not something Tagify can handle, it's just wrong configuration passed into Tagify

[gspawn]

I found here (at "Suggestions selectbox" paragraph)
https://github.com/yairEO/tagify

I interpreted it as if it were the minimum number of characters to make suggestions appear

[gspawn]

... and yes, I've removed it to my code and now it works well (but it call the ajax function even when user digit 1 char too)

[yairEO]

You are the developer and you are the once responsible for calling the ajax function. If you want to only call it after a certain amount of characters typed, then check how much was typed. The Tagify input event allows you to know what has been typed. check the e.detail.value length

[nanawel]

Sorry to bump this thread but I'm having the very same issue and I can't firgure out if it's an expected behavior or not.

I'm using your demo at https://jsbin.com/gavupehuta/1/edit?html,js,output but when I type
:a: :a: (wait) :arrow_down: :leftwards_arrow_with_hook:
I end up with the following content in the textfield: aaabc aa (so 2 tags, one of which is not expected).

Is it how it's supposed to work?
I've tested with Chromium, Vivaldi and Firefox.

[tavosansal]

It actually does this for basically all of the demos. The issue is with the enter key. If you click on the suggestion it will not give you two tags. It will only give you the suggestion. This is the behavior I was expecting personally.

Here is a video recording of what I am seeing. I can also open a new issue if you prefer that.

https://soapbox.wistia.com/videos/fF1JqEYWtk

[tavosansal]

@yairEO @nanawel I added a new issue https://github.com/yairEO/tagify/issues/542 ... seems like the conversation could be more focused there. Thanks!