FIX: display select kit body if no choices (#6237)

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() {

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;
     },
 

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

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."

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"));
+  }
+});