Merge pull request #251 from creative-commoners/pulls/3.0/fix-changet…

…racker-trigger

FIX TagField triggers edit form change without changes

client/src/components/TagField.js

@@ -15,8 +15,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,
       };
     }
@@ -28,6 +36,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.inputRef;
+      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
@@ -55,6 +71,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;
@@ -199,6 +225,8 @@ class TagField extends Component {
       }
     }
 
+    const changedClassName = this.state.hasChanges ? '' : 'no-change-track';
+
     return (
       <EmotionCssCacheProvider>
         <DynamicSelect
@@ -214,6 +242,8 @@ class TagField extends Component {
           isValidNewOption={this.isValidNewOption}
           getNewOptionData={(inputValue, label) => ({ [labelKey]: label, [valueKey]: inputValue })}
           classNamePrefix="ss-tag-field"
+          className={changedClassName}
+          ref={this.selectComponentRef}
         />
       </EmotionCssCacheProvider>
     );

client/src/legacy/entwine/TagField.js

@@ -54,7 +54,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);

package.json

@@ -34,6 +34,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-select": "^5.5.8",
     "url": "^0.11.0"
   },
   "devDependencies": {