Merge branch '3.0' into 3

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
@@ -207,13 +235,16 @@ class TagField extends Component {
           isDisabled={disabled}
           cacheOptions
           onChange={this.handleChange}
+          onBlur={this.handleOnBlur}
           {...optionAttributes}
           getOptionLabel={(option) => option[labelKey]}
           getOptionValue={(option) => option[valueKey]}
           noOptionsMessage={({ inputValue }) => (inputValue ? i18n._t('TagField.NO_OPTIONS', 'No options') : i18n._t('TagField.TYPE_TO_SEARCH', 'Type to search'))}
           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,7 +34,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-select": "^5.7.3",
+    "react-select": "^5.5.8",
     "url": "^0.11.0"
   },
   "devDependencies": {