LT-253: Creating select2 component

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

@@ -1,5 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { $ } from 'meteor/jquery';
 
 /*
  * input: controls a select2 component
@@ -11,8 +12,27 @@ OHIF.mixins.select2 = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
-            // Set the element to be controlled
-            component.$element = instance.$('select:first');
+            // Apply the select2 to the component
+            component.$element.select2(instance.data.options);
+
+            // Store the select2 instance to allow its further destruction
+            component.select2Instance = component.$element.data('select2');
+        },
+
+        onDestroyed() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Destroy the select2 instance to remove unwanted DOM elements
+            component.select2Instance.destroy();
+        },
+
+        events: {
+            'focus .select2-hidden-accessible'(event, instance) {
+                // Redirect the focus to select2 focus control in case of hidden
+                // accessible being focused (e.g. clicking on outer label)
+                $(event.currentTarget).nextAll('.select2:first').find('.select2-selection').focus();
+            }
         }
     }
 });