Dropping ember-select2 for custom component

Fixes #53

app/pods/protected/compare/select-form/component.js

@@ -10,8 +10,8 @@ export default Component.extend({
   "update-strains": null,
   "update-characteristics": null,
 
-  selectedStrains: null,
-  selectedCharacteristics: null,
+  selectedStrains: [],
+  selectedCharacteristics: [],
 
   updateStrains: function(selection) {
     this.set('selectedStrains', selection);
@@ -38,11 +38,11 @@ export default Component.extend({
       strains.forEach((strain) => {
         strain_ids.push(strain.get('id'));
       });
-      this.updateStrains(strain_ids.join(","));
+      this.updateStrains(strain_ids);
     },
 
     deselectAllStrains: function() {
-      this.updateStrains("");
+      this.updateStrains([]);
     },
 
     selectAllCharacteristics: function() {
@@ -51,11 +51,19 @@ export default Component.extend({
       chars.forEach((char) => {
         char_ids.push(char.get('id'));
       });
-      this.updateCharacteristics(char_ids.join(","));
+      this.updateCharacteristics(char_ids);
     },
 
     deselectAllCharacteristics: function() {
-      this.updateCharacteristics("");
+      this.updateCharacteristics([]);
+    },
+
+    updateStrainSelection: function(selection) {
+      this.updateStrains(selection);
+    },
+
+    updateCharacteristicsSelection: function(selection) {
+      this.updateCharacteristics(selection);
     },
   },
 });

app/pods/protected/compare/select-form/template.hbs

@@ -5,12 +5,12 @@
         <li>
           <label>Strains</label>
           {{
-            select-2
+            x-select
+            options=strains
+            nameAttr='fullNameMU'
             multiple=true
-            content=strains
-            value=selectedStrains
-            optionValuePath="id"
-            optionLabelPath="fullNameMU"
+            selected=selectedStrains
+            update=(action "updateStrainSelection")
             placeholder="Select one or more strains"
           }}
         </li>
@@ -25,12 +25,12 @@
         <li>
           <label>Characteristics</label>
           {{
-            select-2
+            x-select
+            options=characteristics
+            nameAttr='characteristicName'
             multiple=true
-            content=characteristics
-            value=selectedCharacteristics
-            optionValuePath="id"
-            optionLabelPath="characteristicName"
+            selected=selectedCharacteristics
+            update=(action "updateCharacteristicsSelection")
             placeholder="Select one or more characteristics"
           }}
         </li>