diff --git a/README.md b/README.md index 8237de9..35dbf2b 100644 --- a/README.md +++ b/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) diff --git a/package.json b/package.json index 1797263..7db323b 100644 --- a/package.json +++ b/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", diff --git a/tagger.css b/tagger.css index 25e6f54..6d3db32 100644 --- a/tagger.css +++ b/tagger.css @@ -3,7 +3,7 @@ * |_ _|___ ___ ___ ___ ___ * | | | .'| . | . | -_| _| * |_| |__,|_ |_ |___|_| - * |___|___| version 0.5.0 + * |___|___| version 0.6.0 * * Tagger - Zero dependency, Vanilla JavaScript Tag Editor * diff --git a/tagger.js b/tagger.js index 7744b4a..bdddafd 100644 --- a/tagger.js +++ b/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*$');