diff --git a/src/parts/events.js b/src/parts/events.js index 6e1432b1..5aac0477 100644 --- 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 index 07b60407..91f68ea8 100644 --- 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 } /**