From ae1e4de2864f39becf75e20013ed2da3d9c908ec Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 20 Oct 2017 13:40:56 -0700
Subject: [PATCH] [FIX] better control on value mutation

---
 .../components/select-box-kit.js.es6          | 35 ++++++++++++-------
 .../topic-footer-mobile-dropdown.js.es6       |  2 ++
 .../components/select-box-test.js.es6         | 16 +++++++++
 .../topic-footer-mobile-dropdown-test.js.es6  |  7 ++++
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
index 9f3c1ebaf89..993957a00a6 100644
--- a/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
+++ b/app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
@@ -48,6 +48,8 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
   fullWidthOnMobile: false,
   castInteger: false,
   allowAny: false,
+  allowValueMutation: true,
+  autoSelectFirst: true,
 
   init() {
     this._super();
@@ -56,13 +58,6 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
       this.setProperties({ filterable: false, autoFilterable: false });
     }
 
-    if (isNone(this.get("none")) && isEmpty(this.get("value")) && !isEmpty(this.get("content"))) {
-      Ember.run.scheduleOnce("sync", () => {
-        const firstValue = this.get(`content.0.${this.get("valueAttribute")}`);
-        this.set("value", firstValue);
-      });
-    }
-
     this._previousScrollParentOverflow = "auto";
     this._previousCSSContext = {};
   },
@@ -171,12 +166,13 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
 
   @computed("content.[]")
   computedContent(content) {
+    this._mutateValue();
     return this.formatContents(content || []);
   },
 
   @computed("value", "none", "computedContent.firstObject.value")
   computedValue(value, none, firstContentValue) {
-    if (isNone(value) && isNone(none)) {
+    if (isNone(value) && isNone(none) && this.get("autoSelectFirst") === true) {
       return this._castInteger(firstContentValue);
     }
 
@@ -276,10 +272,7 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
 
   @computed("filter", "computedFilterable", "computedContent.[]", "computedValue.[]")
   filteredContent(filter, computedFilterable, computedContent, computedValue) {
-    if (computedFilterable === false) {
-      return computedContent;
-    }
-
+    if (computedFilterable === false) { return computedContent; }
     return this.filterFunction(computedContent)(this, computedValue);
   },
 
@@ -470,5 +463,23 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
       width: this.$().width(),
       height: headerHeight + this.$body().outerHeight(false)
     });
+  },
+
+  @on("didReceiveAttrs")
+  _mutateValue() {
+    if (this.get("allowValueMutation") !== true) {
+      return;
+    }
+
+    const none = isNone(this.get("none"));
+    const emptyValue = isEmpty(this.get("value"));
+    const notEmptyContent = !isEmpty(this.get("content"));
+
+    if (none && emptyValue && notEmptyContent) {
+      Ember.run.scheduleOnce("sync", () => {
+        const firstValue = this.get(`content.0.${this.get("valueAttribute")}`);
+        this.set("value", firstValue);
+      });
+    }
   }
 });
diff --git a/app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6 b/app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6
index 0ad7d89bb05..2fb8f3e3172 100644
--- a/app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6
+++ b/app/assets/javascripts/select-box-kit/components/topic-footer-mobile-dropdown.js.es6
@@ -7,6 +7,8 @@ export default ComboBoxComponent.extend({
   classNames: "topic-footer-mobile-dropdown",
   filterable: false,
   autoFilterable: false,
+  allowValueMutation: false,
+  autoSelectFirst: false,
 
   @on("didReceiveAttrs")
   _setTopicFooterMobileDropdownOptions() {
diff --git a/test/javascripts/components/select-box-test.js.es6 b/test/javascripts/components/select-box-test.js.es6
index 066e2004c64..d5ce4660531 100644
--- a/test/javascripts/components/select-box-test.js.es6
+++ b/test/javascripts/components/select-box-test.js.es6
@@ -275,3 +275,19 @@ componentTest('supports keyboard events', {
     });
   }
 });
+
+
+componentTest('supports mutating value when no value given', {
+  template: '{{select-box-kit value=value content=content}}',
+
+  beforeEach() {
+    this.set("value", "");
+    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.equal(this.get("value"), "1");
+    });
+  }
+});
diff --git a/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6 b/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6
index 87f72e9e9b8..fbd31aeafcf 100644
--- a/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6
+++ b/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6
@@ -23,6 +23,13 @@ componentTest('default', {
       assert.equal(selectBox().header.name(), "Topic Controls");
       assert.equal(selectBox().rowByIndex(0).name(), "Bookmark");
       assert.equal(selectBox().rowByIndex(1).name(), "Share");
+      assert.equal(selectBox().selectedRow.el.length, 0, "it doesn’t preselect first row");
+    });
+
+    selectBoxSelectRow("share");
+
+    andThen(() => {
+      assert.equal(this.get("value"), null, "it resets the value");
     });
   }
 });