diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 9a13a22c2f..09cd19d928 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -27,14 +27,20 @@ define([
       }
     },
     componentDidUpdate: function (prevProps) {
-      if (
-        (this.props.item !== undefined && prevProps.item !== undefined)
+      if ((this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
       ) {
         jQuery(`#${this.refs.select.id}`)
           .val(this.getSelectedValues())
           .trigger('change');
       }
+
+      if (this.isSelect2Initialized() &&
+        (this.getFieldId(this.props) !== this.getFieldId(prevProps)) &&
+        this.props.field.resetSelect2OnUpdate !== undefined
+      ) {
+        this.resetSelect2();
+      }
     },
     componentWillUnmount: function () {
       if (this.allowMultipleValues() || this.props.field.forceSelect2) {
@@ -45,6 +51,10 @@ define([
       const props = data || this.props;
       return props.field.id || props.field.name;
     },
+    resetSelect2: function () {
+      this.destroySelect2();
+      this.setupSelect2();
+    },
     destroySelect2: function () {
       if (this.isSelect2Initialized()) {
         jQuery(`#${this.refs.select.id}`).select2('destroy');