From c3011114610cbf88745a22ba93cf717cc736bc17 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 6 Aug 2018 11:22:48 -0400
Subject: [PATCH] FIX: display select kit body if no choices (#6237)

---
 .../admin/components/value-list.js.es6        |  8 +-----
 .../select-kit/components/select-kit.js.es6   | 25 ++++++++++---------
 .../select-kit/select-kit-header.js.es6       |  2 +-
 config/locales/client.en.yml                  |  4 +--
 .../components/single-select-test.js.es6      | 19 ++++++++++++++
 5 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/admin/components/value-list.js.es6 b/app/assets/javascripts/admin/components/value-list.js.es6
index 1f66a00bc74..9e656bed707 100644
--- a/app/assets/javascripts/admin/components/value-list.js.es6
+++ b/app/assets/javascripts/admin/components/value-list.js.es6
@@ -11,13 +11,7 @@ export default Ember.Component.extend({
   newValue: "",
   collection: null,
   values: null,
-
-  @computed("addKey", "filteredChoices.length")
-  noneKey(addKey, filteredChoicesLength) {
-    return addKey || filteredChoicesLength === 0
-      ? "admin.site_settings.value_list.no_choices_none"
-      : "admin.site_settings.value_list.default_none";
-  },
+  noneKey: Ember.computed.alias("addKey"),
 
   @on("didReceiveAttrs")
   _setupCollection() {
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 972143a40b0..e490b61ea1b 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6
@@ -50,7 +50,6 @@ export default Ember.Component.extend(
     filterable: false,
     filter: "",
     previousFilter: "",
-    filterPlaceholder: "select_kit.filter_placeholder",
     filterIcon: "search",
     headerIcon: null,
     rowComponent: "select-kit/select-kit-row",
@@ -235,8 +234,8 @@ export default Ember.Component.extend(
       }
     },
 
-    validateCreate() {
-      return !this.get("hasReachedMaximum");
+    validateCreate(created) {
+      return !this.get("hasReachedMaximum") && created.length > 0;
     },
 
     validateSelect() {
@@ -257,10 +256,10 @@ export default Ember.Component.extend(
       return selection.length >= minimum;
     },
 
-    @computed("shouldFilter", "allowAny", "filter")
-    shouldDisplayFilter(shouldFilter, allowAny, filter) {
+    @computed("shouldFilter", "allowAny")
+    shouldDisplayFilter(shouldFilter, allowAny) {
       if (shouldFilter) return true;
-      if (allowAny && filter.length > 0) return true;
+      if (allowAny) return true;
       return false;
     },
 
@@ -290,6 +289,13 @@ export default Ember.Component.extend(
       }
     },
 
+    @computed("allowAny")
+    filterPlaceholder(allowAny) {
+      return allowAny
+        ? "select_kit.filter_placeholder_with_any"
+        : "select_kit.filter_placeholder";
+    },
+
     @computed("filter", "filterable", "autoFilterable", "renderedFilterOnce")
     shouldFilter(filter, filterable, autoFilterable, renderedFilterOnce) {
       if (renderedFilterOnce && filterable) return true;
@@ -315,12 +321,7 @@ export default Ember.Component.extend(
       if (isLoading || hasReachedMaximum) return false;
       if (collectionComputedContent.map(c => c.value).includes(filter))
         return false;
-      if (
-        this.get("allowAny") &&
-        filter.length > 0 &&
-        this.validateCreate(filter)
-      )
-        return true;
+      if (this.get("allowAny") && this.validateCreate(filter)) return true;
       return false;
     },
 
diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
index 181d13ae32c..79464c9109b 100644
--- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
@@ -25,7 +25,7 @@ export default Ember.Component.extend({
     if (computedContentTitle) return computedContentTitle;
     if (name) return name;
 
-    return null;
+    return "";
   },
 
   // this might need a more advanced solution
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 7ed274c0609..10c55376670 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1276,6 +1276,7 @@ en:
       default_header_text: Select...
       no_content: No matches found
       filter_placeholder: Search...
+      filter_placeholder_with_any: Search or create...
       create: "Create: '{{content}}'"
       max_content_reached:
         one: "You can only select {{count}} item."
@@ -3829,9 +3830,6 @@ en:
         clear_filter: "Clear"
         add_url: "add URL"
         add_host: "add host"
-        value_list:
-          default_none: "Type to filter or create..."
-          no_choices_none: "Type to create..."
         uploaded_image_list:
           label: "Edit list"
           empty: "There are no pictures yet. Please upload one."
diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6
index da1e9fbe56a..056c963400f 100644
--- a/test/javascripts/components/single-select-test.js.es6
+++ b/test/javascripts/components/single-select-test.js.es6
@@ -726,3 +726,22 @@ componentTest("with accents in content", {
     );
   }
 });
+
+componentTest("with no content and allowAny", {
+  template: "{{single-select allowAny=true}}",
+
+  async test(assert) {
+    await click(
+      this.get("subject")
+        .header()
+        .el()
+    );
+
+    const $filter = this.get("subject")
+      .filter()
+      .el();
+
+    assert.ok($filter.hasClass("is-focused"));
+    assert.ok(!$filter.hasClass("is-hidden"));
+  }
+});