FIX Added the state changed checks and bubble up event - pending build

client/src/components/TagField.js

@@ -10,8 +10,16 @@ class TagField extends Component {
   constructor(props) {
     super(props);
 
+    this.selectComponentRef = React.createRef();
+
+    this.state = {
+      initalState: props.value ? props.value : [],
+      hasChanges: false,
+    };
+
     if (!this.isControlled()) {
       this.state = {
+        ...this.state,
         value: props.value,
       };
     }
@@ -22,6 +30,14 @@ class TagField extends Component {
     this.fetchOptions = debounce(this.fetchOptions, 500);
   }
 
+  componentDidUpdate(previousProps, previousState) {
+    if (previousState.hasChanges !== this.state.hasChanges) {
+      const element = this.selectComponentRef.current.select.wrapper;
+      const event = new Event('change', { bubbles: true });
+      element.dispatchEvent(event);
+    }
+  }
+
   /**
    * Get the options that should be shown to the user for this tagfield, optionally filtering by the
    * given string input
@@ -50,6 +66,16 @@ class TagField extends Component {
    * @param {string} value
    */
   handleChange(value) {
+    this.setState({
+      hasChanges: false
+    });
+
+    if (JSON.stringify(this.state.initalState) !== JSON.stringify(value)) {
+      this.setState({
+        hasChanges: true
+      });
+    }
+    
     if (this.isControlled()) {
       this.props.onChange(value);
       return;
@@ -137,13 +163,16 @@ class TagField extends Component {
       }
     }
 
+    const changedClassName = this.state.hasChanges ? '' : 'no-change-track';
+
     return (
       <SelectComponent
         {...passThroughAttributes}
         onChange={this.handleChange}
         onBlur={this.handleOnBlur}
-        inputProps={{ className: 'no-change-track' }}
         {...optionAttributes}
+        className={changedClassName}
+        ref={this.selectComponentRef}
       />
     );
   }

client/src/legacy/entwine/TagField.js

@@ -44,7 +44,7 @@ window.jQuery.entwine('ss', ($) => {
         // clone the object (so we don't modify the original),
         opts = $.extend({}, opts);
         // modify it,
-        opts.ignoreFieldSelector += ', .ss-tag-field .Select :input';
+        opts.ignoreFieldSelector += ', .ss-tag-field .no-change-track :input';
         // then set the clone as the value on this element
         // (so next call to this method gets this same clone)
         this.setChangeTrackerOptions(opts);