fixes #1402 - added blur event when a tag has focus (is editable) a…

…nd then blured. apparently the `onFocusBlur` does not catch this blur event for some reason.
yairEO · Nov 10, 2024 · 3e90111 · 3e90111
1 parent f0747d1
commit 3e90111
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/parts/events.js b/src/parts/events.js
@@ -56,10 +56,6 @@ export default {
                 jQuery(this.DOM.originalInput).on('tagify.removeAllTags', this.removeAllTags.bind(this))
         }
 
-
-        // TODO: bind bubblable "focusin" and "focusout" events on the Tagify scope itself and not the input
-
-
         // setup callback references so events could be removed later
         _CBR = (this.listeners.main = this.listeners.main || {
             keydown          : ['input', _CB.onKeydown.bind(this)],
@@ -189,10 +185,11 @@ export default {
                 _s.onChangeAfterBlur && this.triggerChangeEvent()
             }
 
-            if( isTargetSelectOption || isTargetAddNewBtn || isTargetXBtn )
+            if( isTargetSelectOption || isTargetAddNewBtn || isTargetXBtn ) {
                 return;
+            }
 
-            // should only loose focus at this point if the event was not generated from within a tag, within the component
+            // should only loose focus at this point if the event was not generated from within a tag
             if( isFocused || nodeTag ) {
                 this.state.hasFocus = +new Date()
                 this.toggleFocusClass(this.state.hasFocus)
@@ -719,6 +716,7 @@ export default {
         onClickAnywhere(e){
             if (e.target != this.DOM.scope && !this.DOM.scope.contains(e.target)) {
                 this.toggleFocusClass(false)
+
                 this.state.hasFocus = false
 
                 // do not hide the dropdown if a click was initiated within it and that dropdown belongs to this Tagify instance
@@ -906,6 +904,10 @@ export default {
             if( !this.state.hasFocus )
                 this.toggleFocusClass()
 
+            if(!this.DOM.scope.contains(document.activeElement)) {
+                this.trigger("blur", {})
+            }
+
             // one scenario is when selecting a suggestion from the dropdown, when editing, and by selecting it
             // the "onEditTagDone" is called directly, already replacing the tag, so the argument "editableElm"
             // node isn't in the DOM anynmore because it has been replaced.