FIX: category-drop initial state was incorrect (#6743)

app/assets/javascripts/discourse/templates/components/bread-crumbs.hbs

@@ -1,9 +1,7 @@
-{{
-  category-drop
+{{category-drop
   category=firstCategory
   categories=parentCategoriesSorted
-  countSubcategories=true
-}}
+  countSubcategories=true}}
 
 {{#if childCategories}}
   {{category-drop

app/assets/javascripts/select-kit/components/category-drop.js.es6

@@ -17,7 +17,6 @@ export default ComboBoxComponent.extend({
   tagName: "li",
   categoryStyle: Ember.computed.alias("siteSettings.category_style"),
   noCategoriesLabel: I18n.t("categories.no_subcategory"),
-  mutateAttributes() {},
   fullWidthOnMobile: true,
   caretDownIcon: "caret-right",
   caretUpIcon: "caret-down",
@@ -53,14 +52,7 @@ export default ComboBoxComponent.extend({
   },
 
   init() {
-    this._super();
-
-    if (this.get("category")) {
-      this.set("value", this.get("category.id"));
-    } else {
-      this.set("value", null);
-    }
-    if (!this.get("categories")) this.set("categories", []);
+    this._super(...arguments);
 
     this.get("rowComponentOptions").setProperties({
       hideParentCategory: this.get("subCategory"),
@@ -73,6 +65,11 @@ export default ComboBoxComponent.extend({
     });
   },
 
+  didReceiveAttrs() {
+    if (!this.get("categories")) this.set("categories", []);
+    this.forceValue(this.get("category.id"));
+  },
+
   @computed("content")
   filterable(content) {
     const contentLength = (content && content.length) || 0;

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -115,6 +115,11 @@ export default SelectKitComponent.extend({
   },
   mutateContent() {},
 
+  forceValues(values) {
+    this.mutateValues(values);
+    this._compute();
+  },
+
   filterComputedContent(computedContent, computedValues, filter) {
     return computedContent.filter(c => {
       return this._normalize(get(c, "name")).indexOf(filter) > -1;

app/assets/javascripts/select-kit/components/single-select.js.es6

@@ -56,6 +56,11 @@ export default SelectKitComponent.extend({
     this.set("value", computedValue);
   },
 
+  forceValue(value) {
+    this.mutateValue(value);
+    this._compute();
+  },
+
   _beforeWillComputeValue(value) {
     if (
       !isEmpty(this.get("content")) &&

test/javascripts/components/category-drop-test.js.es6

@@ -0,0 +1,92 @@
+import componentTest from "helpers/component-test";
+import Category from "discourse/models/category";
+
+moduleForComponent("category-drop", {
+  integration: true,
+  beforeEach: function() {
+    this.set("subject", selectKit());
+  }
+});
+
+componentTest("subcatgories - no selection", {
+  template:
+    "{{category-drop onSelect=onSelect category=category parentCategory=parentCategory categories=childCategories subCategory=true noSubcategories=false}}",
+
+  beforeEach() {
+    const parentCategory = Category.findById(2);
+
+    const childCategories = this.site.get("categoriesList").filter(c => {
+      return c.get("parentCategory") === parentCategory;
+    });
+
+    this.set("childCategories", childCategories);
+    this.set("parentCategory", parentCategory);
+  },
+
+  async test(assert) {
+    assert.equal(
+      this.get("subject")
+        .header()
+        .title(),
+      I18n.t("categories.all_subcategories")
+    );
+
+    await this.get("subject").expand();
+
+    assert.equal(
+      this.get("subject")
+        .rowByIndex(0)
+        .name(),
+      I18n.t("categories.no_subcategory")
+    );
+
+    assert.equal(
+      this.get("subject")
+        .rowByIndex(1)
+        .name(),
+      this.get("childCategories.firstObject.name")
+    );
+  }
+});
+
+componentTest("subcatgories - selection", {
+  template:
+    "{{category-drop onSelect=onSelect category=category parentCategory=parentCategory categories=childCategories subCategory=true noSubcategories=false}}",
+
+  beforeEach() {
+    const parentCategory = Category.findById(2);
+
+    const childCategories = this.site.get("categoriesList").filter(c => {
+      return c.get("parentCategory") === parentCategory;
+    });
+
+    this.set("childCategories", childCategories);
+    this.set("category", childCategories.get("firstObject"));
+    this.set("parentCategory", parentCategory);
+  },
+
+  async test(assert) {
+    assert.equal(
+      this.get("subject")
+        .header()
+        .title(),
+      this.get("childCategories.firstObject.name")
+    );
+
+    await this.get("subject").expand();
+
+    assert.equal(
+      this.get("subject")
+        .rowByIndex(0)
+        .name(),
+      I18n.t("categories.all_subcategories")
+    );
+
+    assert.equal(
+      this.get("subject")
+        .rowByIndex(1)
+        .name(),
+      I18n.t("categories.no_subcategory")
+    );
+  }
+});