diff --git a/app/assets/javascripts/select-kit/components/combo-box.js.es6 b/app/assets/javascripts/select-kit/components/combo-box.js.es6
index e3bba9697c5..4f22916d508 100644
--- a/app/assets/javascripts/select-kit/components/combo-box.js.es6
+++ b/app/assets/javascripts/select-kit/components/combo-box.js.es6
@@ -24,8 +24,11 @@ export default SingleSelectComponent.extend({
@on("didReceiveAttrs")
_setComboBoxOptions() {
+ const placeholder = this.get('placeholder');
+
this.get("headerComponentOptions").setProperties({
clearable: this.get("clearable"),
+ placeholder: placeholder ? I18n.t(placeholder) : "",
});
}
});
diff --git a/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6 b/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
index 3835dc01cba..3777d6caa9e 100644
--- a/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
@@ -7,5 +7,6 @@ export default SelectKitHeaderComponent.extend({
clearable: Ember.computed.alias("options.clearable"),
caretUpIcon: Ember.computed.alias("options.caretUpIcon"),
caretDownIcon: Ember.computed.alias("options.caretDownIcon"),
- shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection")
+ shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection"),
+ placeholder: Ember.computed.alias("options.placeholder"),
});
diff --git a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
index c3a7aa14fb3..7a4f4055959 100644
--- a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
@@ -1,8 +1,14 @@
{{#each icons as |icon|}} {{d-icon icon}} {{/each}}
-
- {{{label}}}
-
+{{#if label}}
+
+ {{{label}}}
+
+{{else}}
+
+ {{placeholder}}
+
+{{/if}}
{{#if shouldDisplayClearableButton}}