fixes #1423 - Dropdowns does not close when interacting with tags of …

…other instances
yairEO · Dec 7, 2024 · d9d9ece · d9d9ece
1 parent 0e0ad46
commit d9d9ece
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/parts/events.js b/src/parts/events.js
@@ -719,11 +719,12 @@ export default {
         onClickAnywhere(e){
             if (e.target != this.DOM.scope && !this.DOM.scope.contains(e.target)) {
                 this.toggleFocusClass(false)
-
                 this.state.hasFocus = false
 
+                let closestTagifyDropdownElem = e.target.closest(this.settings.classNames.dropdownSelector);
+
                 // do not hide the dropdown if a click was initiated within it and that dropdown belongs to this Tagify instance
-                if( e.target.closest('.tagify__dropdown') && e.target.closest('.tagify__dropdown').__tagify != this )
+                if( closestTagifyDropdownElem?.__tagify != this )
                     this.dropdown.hide()
             }
         },

diff --git a/src/parts/helpers.js b/src/parts/helpers.js
@@ -212,11 +212,16 @@ export function getUID() {
 }
 
 export function isNodeTag(node){
-    return node && node.classList && node.classList.contains(this.settings.classNames.tag)
+    return isNodeBelongsToThisTagifyInstance.call(this, node) && node?.classList?.contains(this.settings.classNames.tag)
 }
 
 export function isWithinNodeTag(node){
-    return node && node.closest(this.settings.classNames.tagSelector)
+    return isNodeBelongsToThisTagifyInstance.call(this, node) && node?.closest(this.settings.classNames.tagSelector)
+}
+
+function isNodeBelongsToThisTagifyInstance(node) {
+    let closestTagifyNode = node?.closest(this.settings.classNames.namespaceSelector)
+    return closestTagifyNode === this.DOM.scope
 }
 
 /**