Fixing select2 re-rendering issues

Packages/ohif-core/client/components/base/mixins/schemaData.js

@@ -100,7 +100,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
 
             // Fill the items if it's an array schema
             if (!data.items && Array.isArray(currentSchema.allowedValues)) {
-                data.items = new ReactiveVar();
+                data.items = data.items instanceof ReactiveVar ? data.items : new ReactiveVar();
 
                 Tracker.autorun(() => {
                     const schemaDefs = getCurrentSchemaDefs(parent, data.pathKey);

Packages/ohif-core/client/components/base/mixins/select2.js

@@ -1,5 +1,6 @@
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
 import { _ } from 'meteor/underscore';
 import { $ } from 'meteor/jquery';
 import { OHIF } from 'meteor/ohif:core';
@@ -53,6 +54,13 @@ OHIF.mixins.select2 = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
+            // Destroy and re-create the select2 instance
+            const rebuildSelect2 = () => {
+                // Destroy the select2 instance if exists and re-create it
+                if (component.select2Instance) {
+                    component.select2Instance.destroy();
+                }
+
                 // Apply the select2 to the component
                 component.$element.select2(instance.data.options);
 
@@ -76,6 +84,26 @@ OHIF.mixins.select2 = new OHIF.Mixin({
                         component.toggleMessage(false);
                     }
                 });
+            };
+
+            instance.autorun(() => {
+                // Run this computation every time the reactive items suffer any changes
+                const isReactive = instance.data.items instanceof ReactiveVar;
+                if (isReactive) {
+                    instance.data.items.dep.depend();
+                }
+
+                if (isReactive) {
+                    // Keep the current value of the component
+                    const currentValue = component.value();
+                    Tracker.afterFlush(() => {
+                        rebuildSelect2();
+                        component.value(currentValue);
+                    });
+                } else {
+                    rebuildSelect2();
+                }
+            });
         },
 
         onDestroyed() {