fixes #1371 - add event should fire ASAP without any delay. Also sh…

…ould include invalid added tags
yairEO · Aug 28, 2024 · f7c7a84 · f7c7a84
1 parent 1dd2ea6
commit f7c7a84
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/src/tagify.js b/src/tagify.js
@@ -1297,14 +1297,6 @@ Tagify.prototype = {
         if( isValid && isValid === true ){
             // update state
             this.value.push(tagData)
-
-            // adding a timeout because the tag node is yet to be injected into the DOM and the `add` callback should only be calloned once the node is in the DOM.
-            // the reason is that the tag nodes are first placed inside a fragment and once iteration is done, that fragment is placed in the DOM
-            if( !this.state.blockChangeEvent ) {
-                setTimeout(() => {
-                    this.trigger('add', {tag:tagElm, index:this.value.length - 1, data:tagData})
-                });
-            }
         }
         else{
             this.trigger('invalid', {data:tagData, index:this.value.length, tag:tagElm, message:isValid})
@@ -1376,7 +1368,8 @@ Tagify.prototype = {
         var tagElems = [],
             _s = this.settings,
             aggregatedInvalidInput = [],
-            frag = document.createDocumentFragment()
+            frag = document.createDocumentFragment(),
+            addedTags = []; // all tags, also invalid. this is used for firing the `add` event
 
         if( !tagsItems || tagsItems.length == 0 ){
             return tagElems
@@ -1415,13 +1408,19 @@ Tagify.prototype = {
             // add the tag to the component's DOM
             // this.appendTag(tagElm)
             frag.appendChild(tagElm)
-
             this.postProcessNewTagNode(tagElm, tagData)
+            addedTags.push({tagElm, tagData})
         })
 
         this.appendTag(frag)
+
+        addedTags.forEach(({tagElm, tagData}) =>
+            this.trigger('add', {tag:tagElm, index:this.getTagIdx(tagData), data:tagData})
+        )
+
         this.update()
 
+
         if( tagsItems.length && clearInput ){
             this.input.set.call(this, _s.createInvalidTags ? '' : aggregatedInvalidInput.join(_s._delimiters))
             this.setRangeAtStartEnd(false, this.DOM.input)