V3 (#360)

- do not add multiple   after the last tag, in mixed-mode (happens if initial input value has multiline)
- re-wrote "replaceTextWithNode" method completely and renamed it "replaceTextWithNode"
- fix bug where unintended mixed-mode prefixes are removed instead of only the one needed
- fix bug with mixed-mode dropdown not removed when Tagify de-focus
- Changes to "autoComplete" setting. added "rightKey" sub-setting
- when dropdown is shown, pressing ESC key should not create a new tag, but only hide the dropdown
- improve the auto-comeplete setting with sub-settings for "enter" & "right" keys functionality (issue #103)
- on fuzzy-search, only auto-complete the input with terms starts with the typed text
- added loader animations to the CSS and "loading" method to Tagify
- single-value select mode refactoring
- demo page - suggestion list as tags that when clicked add the clicked tag
- renamed jQuery event "remove" to "removeTag" #222
- make demo page header fixed to top
- all triggered events return the instance's scope (tagify)
- add methods to the README (replaceTag)
- improved CSS dropdown animations (on show)
- Show dropdown suggestions list on arrow down #333
- fixed #267 - Pasted text separated with new line symbol doesn't process correctly
- fixed #356 - addTags not working on mix-mode
- add boolean property to "this.dropdown" that would tell if the dropdown is shown or not
- show suggestions dropdown when editing a tag
- add event: "edit:keydown"
- new event: "edit:input"
- new event: "edit:change"
- new event: "edit:start"
- added dropdown ability to use css effects when showing
- dropdown auto-adjusts its placement if there's no space for it at the bottom, it will flip to be above

.gitignore

@@ -58,3 +58,4 @@ Temporary Items
 /.vscode/launch.json
 /.vscode/settings.json
 /111.html
+/logo.psd

dist/react.tagify.js

@@ -13,16 +13,23 @@ class Tags extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
+    const tagify = this.tagify
+
     // check if value has changed
-    if (nextProps.value && nextProps.value.join() != this.props.value.join()) {
-      this.tagify.loadOriginalValues(nextProps.value);
+    if (nextProps.value && nextProps.value.join() !== this.props.value.join()) {
+      tagify.loadOriginalValues(nextProps.value)
       // this.tagify.addTags(nextProps.value, true, true)
     }
 
-    this.tagify.settings.whitelist = nextProps.settings.whitelist;
+    this.tagify.settings.whitelist = nextProps.settings.whitelist
 
-    if (nextProps.showDropdown)
-      this.tagify.dropdown.show.call(this.tagify, nextProps.showDropdown);
+    if (nextProps.showDropdown) {
+      tagify.dropdown.show.call(tagify, nextProps.showDropdown)
+      tagify.toggleFocusClass(true)
+    }
+    else if ("showDropdown" in nextProps && !nextProps.showDropdown) {
+      tagify.dropdown.hide.call(tagify)
+    }
 
     // do not allow react to re-render since the component is modifying its own HTML
     return false;
@@ -34,22 +41,22 @@ class Tags extends React.Component {
 
   render() {
     const attrs = {
-      ref: this._handleRef,
-      name: this.props.name,
-      className: this.props.className,
+      ref        : this._handleRef,
+      name       : this.props.name,
+      className  : this.props.className,
       placeholder: this.props.class,
-      autoFocus: this.props.autofocus,
-      value: this.props.children
-    };
+      autoFocus  : this.props.autofocus,
+      value      : this.props.children
+    }
 
-    const { className } = this.props;
+    const { className } = this.props
 
     return React.createElement(
       "div",
       { className },
       React.createElement(
         this.props.mode,
-        Object.assign({}, attrs, { defaultValue: this.props.initialValue })
+        Object.assign({}, attrs, { defaultValue:this.props.initialValue })
       )
     );
   }