Fixing reactivity on input items that are built from schema

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

@@ -2,22 +2,25 @@ import { OHIF } from 'meteor/ohif:core';
 import { Blaze } from 'meteor/blaze';
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
 import { _ } from 'meteor/underscore';
 
 // Helper function to get the component's current schema
-const getCurrentSchema = (parentComponent, key) => {
+const getCurrentSchemaDefs = (parentComponent, key) => {
     // Get the parent component schema
     let schema = parentComponent && parentComponent.schema;
+    let schemaComponentHolder = parentComponent;
 
     // Try to get the form schema if it was not found
     if (parentComponent && !schema) {
         const form = parentComponent.getForm();
         schema = form && form.schema;
+        schemaComponentHolder = form;
     }
 
     // Stop here if there's no key or schema defined
     if (!key || !schema) {
-        return;
+        return { schemaComponentHolder };
     }
 
     // Get the current schema data using component's key
@@ -25,7 +28,7 @@ const getCurrentSchema = (parentComponent, key) => {
 
     // Stop here if no schema was found for the given key
     if (!currentSchema) {
-        return;
+        return { schemaComponentHolder };
     }
 
     // Merge the sub-schema properties if it's an array
@@ -34,7 +37,10 @@ const getCurrentSchema = (parentComponent, key) => {
     }
 
     // Return the component's schema definitions
-    return currentSchema;
+    return {
+        currentSchema,
+        schemaComponentHolder
+    };
 };
 
 /*
@@ -65,7 +71,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             }
 
             // Get the current schema data using component's key
-            const currentSchema = getCurrentSchema(parent, data.pathKey);
+            const { currentSchema } = getCurrentSchemaDefs(parent, data.pathKey);
 
             // Stop here if there's no schema data for current key
             if (!currentSchema) {
@@ -94,24 +100,36 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
 
             // Fill the items if it's an array schema
             if (!data.items && Array.isArray(currentSchema.allowedValues)) {
-                // Initialize the items array
+                data.items = new ReactiveVar();
-                const items = [];
 
-                // Get the values and labels arrays from schema
+                Tracker.autorun(() => {
-                const values = currentSchema.allowedValues;
+                    const schemaDefs = getCurrentSchemaDefs(parent, data.pathKey);
-                const labels = currentSchema.valuesLabels || [];
 
-                // Iterate the allowed values array
+                    // Check if schema is reactive and add reactivity to this function if so
-                for (let i = 0; i < values.length; i++) {
+                    const componentHolder = schemaDefs.schemaComponentHolder;
-                    // Push the current item to the items array
+                    if (componentHolder.templateInstance.data.schema instanceof ReactiveVar) {
-                    items.push({
+                        componentHolder.templateInstance.data.schema.dep.depend();
-                        value: values[i],
+                    }
-                        label: labels[i] || values[i]
-                    });
-                }
 
-                // Add the items to a reactive instance
+                    // Get the values and labels arrays from schema
-                data.items = new ReactiveVar(items);
+                    const values = schemaDefs.currentSchema.allowedValues;
+                    const labels = schemaDefs.currentSchema.valuesLabels || [];
+
+                    // Initialize the items array
+                    const items = [];
+
+                    // Iterate the allowed values array
+                    for (let i = 0; i < values.length; i++) {
+                        // Push the current item to the items array
+                        items.push({
+                            value: values[i],
+                            label: labels[i] || values[i]
+                        });
+                    }
+
+                    // Add the items to a reactive instance
+                    data.items.set(items);
+                });
             }
         },
 
@@ -122,7 +140,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             // Create a data parser according to current schema key
             component.parseData = value => {
                 // Get the current schema data using component's key
-                const currentSchema = getCurrentSchema(component.parent, instance.data.pathKey);
+                const { currentSchema } = getCurrentSchemaDefs(component.parent, instance.data.pathKey);
 
                 // Stop here if there's no schema data for current key
                 if (!currentSchema) {
@@ -149,7 +167,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             const component = instance.component;
 
             // Get the current schema data using component's key
-            const currentSchema = getCurrentSchema(component.parent, instance.data.pathKey);
+            const { currentSchema } = getCurrentSchemaDefs(component.parent, instance.data.pathKey);
 
             // Stop here if there's no schema data for current key
             if (!currentSchema) {

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

@@ -1,6 +1,8 @@
-import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { _ } from 'meteor/underscore';
 import { $ } from 'meteor/jquery';
+import { OHIF } from 'meteor/ohif:core';
 
 /*
  * input: controls a select2 component
@@ -27,10 +29,7 @@ OHIF.mixins.select2 = new OHIF.Mixin({
                 }
 
                 // Check if there is already an empty option on items list
-                const query = {
+                if (!_.findWhere(items, { value: '' })) {
-                    value: ''
-                };
-                if (!_.findWhere(items, query)) {
                     // Clone the current items
                     const newItems = _.clone(items) || [];
                     newItems.unshift({
@@ -82,7 +81,9 @@ OHIF.mixins.select2 = new OHIF.Mixin({
             const component = instance.component;
 
             // Destroy the select2 instance to remove unwanted DOM elements
-            component.select2Instance.destroy();
+            if (component.select2Instance) {
+                component.select2Instance.destroy();
+            }
         }
     }
 });