From b14d9529b86fdc3fdff84181901e41400b5ba0f1 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 22 Nov 2017 13:49:45 +0100
Subject: [PATCH] FIX: adds support for name changes tracking

---
 .../select-kit/components/select-kit.js.es6   |  9 +++++++
 .../components/single-select-test.js.es6      | 25 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6
index 0ece08c968b..a8043eaf376 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6
@@ -60,6 +60,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   content: null,
   computedContent: null,
   limitMatches: 100,
+  nameChanges: false,
 
   init() {
     this._super();
@@ -74,6 +75,14 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     if ((this.site && this.site.isMobileDevice) || $(window).outerWidth(false) <= 420) {
       this.setProperties({ filterable: false, autoFilterable: false });
     }
+
+    if (this.get("nameChanges")) {
+      this.addObserver(`content.@each.${this.get("nameProperty")}`, this, this._compute);
+    }
+  },
+
+  willDestroyElement() {
+    this.removeObserver(`content.@each.${this.get("nameProperty")}`, this, this._compute);
   },
 
   willComputeAttributes() {},
diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6
index d3c13c16740..56487e4b5dc 100644
--- a/test/javascripts/components/single-select-test.js.es6
+++ b/test/javascripts/components/single-select-test.js.es6
@@ -398,3 +398,28 @@ componentTest('support modifying on select behavior through plugin api', {
     andThen(() => clearCallbacks());
   }
 });
+
+componentTest('with nameChanges', {
+  template: '{{single-select content=content nameChanges=true}}',
+
+  beforeEach() {
+    this.set("robin", { id: "1", name: "robin"});
+    this.set("content", [this.get("robin")]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    andThen(() => {
+      assert.equal(selectKit().header.name(), "robin");
+    });
+
+    andThen(() => {
+      this.set("robin.name", "robin2");
+    });
+
+    andThen(() => {
+      assert.equal(selectKit().header.name(), "robin2");
+    });
+  }
+});