Tagify: Can't delete tags just added, by clicking on the cross button

[vitobotta]

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.

[vitobotta]

Interesting, it looks like the problem occurs if I type more than one letter when searching for a tag. This results in multiple requests to fetch the tags, the first of which get cancelled. If I only type one letter and select the tag from the list, then I can remove the tag by clicking on the x.

BTW the problem happens also with the jsbin, although not every time. Please check it out and try several times (sample tags are "programming", "devops", "kubernetes"). Thanks!

[yairEO]

I will look into it

[vitobotta]

@yairEO Wonderful, thanks!

[yairEO]

I think it's your code. Are you using React or some framework to manage the state of your Tagify?
if so, it might be that the state forces itself and does not update, but i'm only guessing. I cannot reproduce the bug in your demo page on my machine.

You JSBIN example seems fine to me. I wrote your tags (few characters) then added those tags by mouse click / keyboard click and was able to delete all tags via mouse click (on the x button) without a problem.

Do you see any error in the console when it's not getting deleted?

[vitobotta]

Hi @yairEO , no errors in the console. The x button just doesn't do anything after I add a tag. I have just noticed that the x buttons stop work also for tags that already exist when I load the page. If I load the page I can remove the tags by clicking on the x if I don't add any other tags.

I am not using React but Stimulus. However the relevant code is minimal and very similar to what's in the jsbin: https://gist.githubusercontent.com/vitobotta/614c76f9f02d607e430264eea5c2c74b/raw/8f43d0939e8d2f29cf49dbb270217c020afb3dc3/gistfile1.txt

I was even thinking that it might be a stupid CSS problem with some weird styling that prevents clicks on the x.... but I added an event listener for the click that prints something in the console and that works. It's as if the x button loses the listener added by tagify :(

[vitobotta]

Found what is causing the problem! It's the .loading(false/true) bit. If I remove that everything works great. Can you think of a reason why that can cause issues in some cases? Thanks

[yairEO]

Which browser/OS are you using? I am unable reproduce the bug at all..
I'm on Windows/chrome (Version 80.0.3987.106)

Have you tried on other computers?

[vitobotta]

Hi, it is totally possible that something else in my code is interfering but I have no idea of what to try. I have the same problem with Chrome/Brave/Edge/Firefox and I am on Mac. For now I have removed that little bit about the loading thing and it's working fine. I am not very good with JavaScript so to look into the source code.... how does this loading thing work? Just to see if there is something I can try

[yairEO]

maybe it's some CSS thing in your code, it can be many things...
The loading method simply add/remove a class: tagify--loading on the main element of Tagify

[vitobotta]

Then it's even weirder than I thought if it's just a css class that being added/removed :D

[kuemmi]

I encountered the same problem, and it looks like a timing issue to me. The behaviour only occurs if there are two successful fetch requests in a row and if the requests take less than 250ms.

To reproduce this, I typed two letters while waiting for the loading animation to go away for each letter, then hit tab. When I click on the x, the tag stays there, the cursor disappears and the field (a textarea in my case) becomes unresponsive.

Could the setTimeout call in dropdown.hide have anything to do with this?

[vitobotta]

@kuemmi So it's not just me then :) Have you tried removing the loading thing to see if it works for you too?

[kuemmi]

@vitobotta Yes, removing the tagify.loading(true).dropdown.hide.call(tagify) call helps. That and the 250ms in the setTimeout call in dropdown.hide leads me to believe that something breaks if dropdown.show is called before those 250ms have elapsed.

[kuemmi]

@yairEO If you need a way to reproduce this, I've copied your text input example from the demo page and modified the timeout in the mockAjax function:

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

Reproduce by typing two letters that bring up more suggestions ("ab" should work), while waiting for the mockAjax call to complete after each typed letter. Then hit tab and try to delete the new tag.

[vitobotta]

Thanks for looking into this @kuemmi ! I tried your demo and it works as you described. If I change the timeout to >250ms then I can remove the tag as you explained.

[yairEO]

@kuemmi - very clever! I will debug this.

[yairEO]

released a fix on version 3.5.0

[kuemmi]

Hey, thanks for looking into this. I am however still able to reproduce this with the latest files from the master branch.

[yairEO]

I'm investigating from the helpful demo of mister @kuemmi

[yairEO]

I see there was a typo in the dropdown.show method for clearing the timeout dropdownHide__bindEventsTimeout. I've corrected it and will publish a fix now

[ycv005]

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.

I am also facing the same. So when I removed closeOnSelect: false or set it to true, it is working.

[yairEO]

@ycv005 - just tried (on latest Chrome) with closeOnSelect: false and I was able to delete the tag by clicking the X button or pressing backspace.

which version of Tagify are you using?

[ycv005]

Version- Tagify (v 3.6.10). I have created the bug setting closeOnSelect: false (it may or may not be because of it.) See the video. Since your plugin is really helpful to me, that's why I have created a video for demonstrations. If you wish to see the codebase, check [here] (where I have already removed closeOnSelect)(https://github.com/ycv005/getnote/blob/master/note/static/js/add_note.js) (where I have already removed the closeOnSelect)

[yairEO]

I've tried but I cannot reproduce it, can you please create a jsbin which clearly shows the bug, with steps telling me what to do?

Your last demo page works fire on Chrome & FF no matter how I much try it just works well

[uchamaisuradze]

Version 3.6.10 - Issue still happens in case if you write text manually and press enter. After that, if you select any tag from dropdown, issue is fixed. Weird :)
closeOnSelect should be false to reproduce.

[jadamec]

Hi there, I had a same issue when using 3.8.0 version, but upgrading to latest (3.9.3.) fixed this. Thanks, great work! :)