Tagify: If tag is added after another (without space) backspace is not deleting the second tag

[eugenetraction]

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://yaireo.github.io/tagify/ mixed mode. Just add two tags one after another without space and try hitting backspace.

Explanation

• What is the expected behavior?

It should delete the second tag, or it should insert a space in between tags if it is required.

• What is happening instead?

Two tags are "merged" together and backspace key doesn't work.

• What error message are you getting?

No error. Change events are emitting.

[yairEO]

I am on it. Thanks for reporting.

[eugenetraction]

@yairEO is there any way to fix this issue by inserting space after newly added tag? (either right away or as soon as user starts typing) This is how it works in many places, including this exact github textarea. If you press # and select a tag it automatically adds the trailing space.

I tried to do it with tagify.parseMixTags(tagify.DOM.originalInput.value + ' '), but it throws an error t.placeCaretAfterTag :(

[yairEO]

I was thinking about it a lot last year and decided not to because if you add a space after a tag automatically, you would need to press backspace twice to delete that tag which can be annoying. Here in github it's not real tags, like in Tagify, it looks and behaves different and the use case it only one (for Github)

It was asked before on #453 and here is the demo I've prepared:

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

[yairEO]

I was working all day long on this one. soon it will be ready.

[eugenetraction]

@yairEO Thanks a lot for the demo and quick responses. I really appreciate how much support you give for this already amazing component!

I tried adding space just like in your demo, but it seems there is a race condition with setTimeout(this.placeCaretAfterTag.bind(this), 100, tagElm). So I have to move caret with a timeout 300-400, otherwise the caret is added right after the tag (and before the space). It works, but I'm concerned it might be not reliable...

Could there be any way to inject space if user starts typing and the last element is a tag?

[yairEO]

well it depends where exactly does the user types and what is the content at that time. Anyway, I've created a new setting called insertAfterTag and it allows to place a String or a Node right after a tag (upon tag creation)

Will hopefully deploy a new version today

[eugenetraction]

@yairEO great work! Thanks so much!!