Skip to content

Commit

Permalink
Merge pull request #251 from creative-commoners/pulls/3.0/fix-changet…
Browse files Browse the repository at this point in the history
…racker-trigger

FIX TagField triggers edit form change without changes
  • Loading branch information
GuySartorelli authored Jul 20, 2023
2 parents f1a2e30 + efeb8b2 commit cc2016a
Show file tree
Hide file tree
Showing 5 changed files with 259 additions and 5 deletions.
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 30 additions & 0 deletions client/src/components/TagField.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
}
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -199,6 +225,8 @@ class TagField extends Component {
}
}

const changedClassName = this.state.hasChanges ? '' : 'no-change-track';

return (
<EmotionCssCacheProvider>
<DynamicSelect
Expand All @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/legacy/entwine/TagField.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Loading

0 comments on commit cc2016a

Please sign in to comment.