Merge pull request #43 from jcubic/change-event

Change event

Author: jcubic

README.md

@@ -3,11 +3,11 @@
  |_   _|___ ___ ___ ___ ___
    | | | .'| . | . | -_|  _|
    |_| |__,|_  |_  |___|_|
-           |___|___|   version 0.5.0
+           |___|___|   version 0.6.0
 ```
 # [Tagger: Zero dependency, Vanilla JavaScript Tag Editor](https://github.com/jcubic/tagger)
 
-[![npm](https://img.shields.io/badge/npm-0.5.0-blue.svg)](https://www.npmjs.com/package/@jcubic/tagger)
+[![npm](https://img.shields.io/badge/npm-0.6.0-blue.svg)](https://www.npmjs.com/package/@jcubic/tagger)
 
 ![Tag Editor widget in JavaScript](https://raw.githubusercontent.com/jcubic/tagger/master/screenshot.png)
 
@@ -101,6 +101,8 @@ TypeScript definition file:
 [tagger.d.ts](https://github.com/jcubic/tagger/blob/master/tagger.d.ts)
 
 ## Changelog
+### 0.6.0
+* add native change event for the original input element on tag change
 ### 0.5.0
 * fix initialization [#23](https://github.com/jcubic/tagger/issues/23). Thanks to [James Lucas](https://github.com/lucasnetau)
 * add placeholder option. Thanks to [James Lucas](https://github.com/lucasnetau)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jcubic/tagger",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Zero dependency, Vanilla JavaScript Tag Editor",
   "typings": "tagger.d.ts",
   "main": "tagger.js",

tagger.css

@@ -3,7 +3,7 @@
  * |_   _|___ ___ ___ ___ ___
  *   | | | .'| . | . | -_|  _|
  *   |_| |__,|_  |_  |___|_|
- *           |___|___|   version 0.5.0
+ *           |___|___|   version 0.6.0
  *
  * Tagger - Zero dependency, Vanilla JavaScript Tag Editor
  *

tagger.js

@@ -3,7 +3,7 @@
  * |_   _|___ ___ ___ ___ ___
  *   | | | .'| . | . | -_|  _|
  *   |_| |__,|_  |_  |___|_|
- *           |___|___|   version 0.5.0
+ *           |___|___|   version 0.6.0
  *
  * Tagger - Zero dependency, Vanilla JavaScript Tag Editor
  *
@@ -161,6 +161,10 @@
                 this._build_completion(this._settings.completion.list);
             }
         },
+        _update_input: function () {
+          this._input.value = this._tags.join(',');
+          this._input.dispatchEvent(new Event('change', { bubbles: true }));
+        },
         // --------------------------------------------------------------------------------------
         _add_events: function() {
             var self = this;
@@ -192,7 +196,7 @@
                         var li = self._ul.querySelector('li:nth-last-child(2)');
                         self._ul.removeChild(li);
                         self._tags.pop();
-                        self._input.value = self._tags.join(',');
+                        self._update_input();
                     }
                     event.preventDefault();
                 } else if (event.keyCode === 32 && (event.ctrlKey || event.metaKey)) {
@@ -214,7 +218,7 @@
                         self._new_input_tag.value = '';
                     }
                 } else {
-                	var min = self._settings.completion.min_length;
+                    var min = self._settings.completion.min_length;
                     if (typeof self._settings.completion.list === 'function' && value.length >= min) {
                         self.complete(value);
                     }
@@ -318,7 +322,7 @@
             }
             this._new_tag(name);
             this._tags.push(name);
-            this._input.value = this._tags.join(',');
+            this._update_input();
             return true;
         },
         // --------------------------------------------------------------------------------------
@@ -340,7 +344,7 @@
             this._tags = this._tags.filter(function(tag) {
                 return name !== tag;
             });
-            this._input.value = this._tags.join(',');
+            this._update_input()
             if (remove_dom) {
                 var tags = Array.from(this._ul.querySelectorAll('.label'));
                 var re = new RegExp('^\s*' + escape_regex(name) + '\s*$');