select2 4.0

app/pods/components/x-select/component.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-const { Component } = Ember;
+const { Component, get, run: { schedule } } = Ember;
 
 export default Component.extend({
   tagName: 'select',
@@ -11,24 +11,43 @@ export default Component.extend({
   options: null,
   selected: null,
   nameAttr: null,
+  placeholder: null,
 
   change: function() {
-    this.attrs.update(this.$().select2('val'));
-  },
+    let selectedInComponent = this.get('selected');
+    let selectedInWidget = this.$().val();
 
-  didInsertElement: function() {
-    if (this.get('placeholder')) {
-      this.$().select2({
-        placeholder: this.get('placeholder'),
-      });
-    } else {
-      this.$().select2();
+    if (this.get('multiple')) {
+      if (selectedInWidget === null) {
+        selectedInWidget = [];
+      }
+      selectedInComponent = selectedInComponent.toString();
+      selectedInWidget = selectedInWidget.toString();
+    }
+
+    // We need this to prevent an infinite loop of afterRender -> change.
+    if (selectedInComponent !== selectedInWidget) {
+      this.attrs.update(this.$().val());
     }
   },
 
+  didInsertElement: function() {
+    let options = {};
+    options.placeholder = this.get('placeholder');
+    options.templateResult = function(item) {
+      if (!item.disabled) {
+        const text = get(item, 'element.innerHTML');
+        const $item = Ember.$(`<span>${text}</span>`);
+        return $item;
+      }
+    };
+    this.$().select2(options);
+  },
+
   didRender: function() {
-    Ember.run.schedule('afterRender', this, function() {
-      this.$().select2('val', this.get('selected'));
+    const selected = this.get('selected');
+    schedule('afterRender', this, function() {
+      this.$().val(selected).trigger('change');
     });
   },