From c9310566895a355bd8c974af0c3c66f03214b50c Mon Sep 17 00:00:00 2001
From: josephlewisnz <josephlewisnz@gmail.com>
Date: Fri, 22 Sep 2023 15:20:32 +1200
Subject: [PATCH] FIX Added the state changed checks and bubble up event -
 pending build

---
 client/src/components/TagField.js     | 31 ++++++++++++++++++++++++++-
 client/src/legacy/entwine/TagField.js |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/client/src/components/TagField.js b/client/src/components/TagField.js
index 958ccb9..e61ccd8 100644
--- a/client/src/components/TagField.js
+++ b/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}
       />
     );
   }
diff --git a/client/src/legacy/entwine/TagField.js b/client/src/legacy/entwine/TagField.js
index 66b9833..80cfb60 100644
--- a/client/src/legacy/entwine/TagField.js
+++ b/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);