BUILD

yairEO · Jan 24, 2022 · 0865d9c · 0865d9c
1 parent 48c166f
commit 0865d9c
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 30 deletions.
diff --git a/dist/jQuery.tagify.min.js b/dist/jQuery.tagify.min.js
diff --git a/dist/react.tagify.js b/dist/react.tagify.js
diff --git a/dist/tagify.esm.js b/dist/tagify.esm.js
@@ -1,5 +1,5 @@
 /**
- * Tagify (v 4.9.2) - tags input component
+ * Tagify (v 4.9.4) - tags input component
  * By Yair Even-Or
  * Don't sell this code. (c)
  * https://github.com/yairEO/tagify
@@ -1973,8 +1973,16 @@ var events = {
 
 function Tagify(input, settings) {
   if (!input) {
-    console.warn('Tagify: ', 'input element not found', input);
-    return this;
+    console.warn('Tagify:', 'input element not found', input); // return an empty mock of all methods, so the code using tagify will not break
+    // because it might be calling methods even though the input element does not exists
+
+    const mockInstance = new Proxy(this, {
+      get() {
+        return () => mockInstance;
+      }
+
+    });
+    return mockInstance;
   }
 
   if (input.previousElementSibling && input.previousElementSibling.classList.contains('tagify')) {
@@ -2249,7 +2257,10 @@ Tagify.prototype = {
    */
   loadOriginalValues(value) {
     var lastChild,
-        _s = this.settings;
+        _s = this.settings; // temporarily block firign the "change" event on the original input unil
+    // this method finish removing current value and adding the new one
+
+    this.state.blockChangeEvent = true;
 
     if (value === undefined) {
       const persistedOriginalValue = this.getPersistedData('value'); // if the field already has a field, trust its the desired
@@ -2258,9 +2269,7 @@ Tagify.prototype = {
       if (persistedOriginalValue && !this.DOM.originalInput.value) value = persistedOriginalValue;else value = _s.mixMode.integrated ? this.DOM.input.textContent : this.DOM.originalInput.value;
     }
 
-    this.removeAllTags({
-      withoutChangeEvent: true
-    });
+    this.removeAllTags();
 
     if (value) {
       if (_s.mode == 'mix') {
@@ -2277,7 +2286,7 @@ Tagify.prototype = {
     } else this.postUpdate();
 
     this.state.lastOriginalValueReported = _s.mixMode.integrated ? '' : this.DOM.originalInput.value;
-    this.state.loadedOriginalValues = true;
+    this.state.blockChangeEvent = false;
   },
 
   cloneEvent(e) {
@@ -3288,7 +3297,7 @@ Tagify.prototype = {
     }
 
     if (!tagsToRemove.length) return;
-    this.settings.hooks.beforeRemoveTag(tagsToRemove, {
+    return this.settings.hooks.beforeRemoveTag(tagsToRemove, {
       tagify: this
     }).then(() => {
       function removeNode(tag) {
@@ -3394,7 +3403,7 @@ Tagify.prototype = {
     var inputValue = this.getInputValue();
     this.setOriginalInputValue(inputValue);
     this.postUpdate();
-    if (!(args || {}).withoutChangeEvent && this.state.loadedOriginalValues) this.triggerChangeEvent();
+    if (!(args || {}).withoutChangeEvent && !this.state.blockChangeEvent) this.triggerChangeEvent();
   },
 
   getInputValue() {

diff --git a/dist/tagify.js b/dist/tagify.js
@@ -1,5 +1,5 @@
 /**
- * Tagify (v 4.9.2) - tags input component
+ * Tagify (v 4.9.4) - tags input component
  * By Yair Even-Or
  * Don't sell this code. (c)
  * https://github.com/yairEO/tagify
@@ -1979,8 +1979,16 @@
 
   function Tagify(input, settings) {
     if (!input) {
-      console.warn('Tagify: ', 'input element not found', input);
-      return this;
+      console.warn('Tagify:', 'input element not found', input); // return an empty mock of all methods, so the code using tagify will not break
+      // because it might be calling methods even though the input element does not exists
+
+      const mockInstance = new Proxy(this, {
+        get() {
+          return () => mockInstance;
+        }
+
+      });
+      return mockInstance;
     }
 
     if (input.previousElementSibling && input.previousElementSibling.classList.contains('tagify')) {
@@ -2255,7 +2263,10 @@
      */
     loadOriginalValues(value) {
       var lastChild,
-          _s = this.settings;
+          _s = this.settings; // temporarily block firign the "change" event on the original input unil
+      // this method finish removing current value and adding the new one
+
+      this.state.blockChangeEvent = true;
 
       if (value === undefined) {
         const persistedOriginalValue = this.getPersistedData('value'); // if the field already has a field, trust its the desired
@@ -2264,9 +2275,7 @@
         if (persistedOriginalValue && !this.DOM.originalInput.value) value = persistedOriginalValue;else value = _s.mixMode.integrated ? this.DOM.input.textContent : this.DOM.originalInput.value;
       }
 
-      this.removeAllTags({
-        withoutChangeEvent: true
-      });
+      this.removeAllTags();
 
       if (value) {
         if (_s.mode == 'mix') {
@@ -2283,7 +2292,7 @@
       } else this.postUpdate();
 
       this.state.lastOriginalValueReported = _s.mixMode.integrated ? '' : this.DOM.originalInput.value;
-      this.state.loadedOriginalValues = true;
+      this.state.blockChangeEvent = false;
     },
 
     cloneEvent(e) {
@@ -3294,7 +3303,7 @@
       }
 
       if (!tagsToRemove.length) return;
-      this.settings.hooks.beforeRemoveTag(tagsToRemove, {
+      return this.settings.hooks.beforeRemoveTag(tagsToRemove, {
         tagify: this
       }).then(() => {
         function removeNode(tag) {
@@ -3400,7 +3409,7 @@
       var inputValue = this.getInputValue();
       this.setOriginalInputValue(inputValue);
       this.postUpdate();
-      if (!(args || {}).withoutChangeEvent && this.state.loadedOriginalValues) this.triggerChangeEvent();
+      if (!(args || {}).withoutChangeEvent && !this.state.blockChangeEvent) this.triggerChangeEvent();
     },
 
     getInputValue() {

diff --git a/dist/tagify.min.js b/dist/tagify.min.js
diff --git a/dist/tagify.polyfills.min.js b/dist/tagify.polyfills.min.js
@@ -1,5 +1,5 @@
 /**
- * Tagify (v 4.9.2) - tags input component
+ * Tagify (v 4.9.4) - tags input component
  * By Yair Even-Or
  * Don't sell this code. (c)
  * https://github.com/yairEO/tagify

diff --git a/test/basic.html b/test/basic.html
@@ -78,9 +78,13 @@
     }
 })
 
+inputElm.addEventListener('change', () => console.log("CHANGED!"))
+
 setTimeout(() => {
-    tagify.whitelist = ["ac", "aab", "aaa", "b", "bb", "ccc"]
-}, 1000);
+    tagify.loadOriginalValues(["ac", "aab", "aaa", "b", "bb", "ccc"])
+}, 500);
+
+
 })()
 </script>
 

diff --git a/test/mode-select.html b/test/mode-select.html
@@ -37,7 +37,7 @@
     <body>
 
 
-        <input name='tags-select-mode' class='selectMode' placeholder="Please select" value="1" />
+        <input name='tags-select-mode' class='selectMode' placeholder="Please select" value="One" />
 
         <input name='tags-select-mode' class='selectMode' placeholder="Please select" value="1" />
 
@@ -48,6 +48,7 @@
         tagTextProp : 'title',
         enforceWhitelist: true,
         keepInvalidTags: false,
+        maxTags: 1,
         whitelist: [
             { "id":"1", "value": 1, "title":"First option" },
             { "id":"2", "value": 2, "title":"Second option" },
@@ -57,6 +58,7 @@
             {'value':'Item d',id:4},
             {'value':'Item e',id:5}
         ],
+        whitelist: ['One', 'Two', 'Three'],
         dropdown: {
             maxItems: 3,
             //mapValueTo: 'username',