Don't show selectize dropdown when input field is blank

no issue
- modify behaviour of selectize's `openOnFocus` option by ensuring that the dropdown is not opened when the input field is blank
- fixes issue with dropdown opening when content is loaded async despite `openOnFocus=false`
- fixes issue with dropdown remaining open when user enters text then deletes it
This commit is contained in:
Kevin Ansfield 2015-09-01 09:53:10 +01:00
parent e574edf240
commit 169384c3c7
4 changed files with 22 additions and 20 deletions

View File

@ -124,23 +124,6 @@ export default Ember.Component.extend({
onBlur: function () { onBlur: function () {
this._resetKeymasterScope(); this._resetKeymasterScope();
},
// hacky method of disabling the dropdown until a user has typed something
// TODO: move into a selectize plugin
onInit: function () {
var selectize = this.get('_selectize');
selectize.on('dropdown_open', function () {
if (Ember.isBlank(selectize.$control_input.val())) {
selectize.close();
}
});
},
onUpdateFilter: function (filter) {
if (Ember.isBlank(filter)) {
this.get('_selectize').close();
}
} }
} }

View File

@ -3,6 +3,26 @@ import EmberSelectizeComponent from 'ember-cli-selectize/components/ember-select
export default EmberSelectizeComponent.extend({ export default EmberSelectizeComponent.extend({
_dontOpenWhenBlank: Ember.on('didInsertElement', function () {
var openOnFocus = this.get('openOnFocus');
if (!openOnFocus) {
Ember.run.next(this, function () {
var selectize = this._selectize;
selectize.on('dropdown_open', function () {
if (Ember.isBlank(selectize.$control_input.val())) {
selectize.close();
}
});
selectize.on('type', function (filter) {
if (Ember.isBlank(filter)) {
selectize.close();
}
});
});
}
}),
/** /**
* Event callback that is triggered when user creates a tag * Event callback that is triggered when user creates a tag
* - modified to pass the caret position to the action * - modified to pass the caret position to the action

View File

@ -8,9 +8,7 @@
optionGroupPath="content.category" optionGroupPath="content.category"
openOnFocus=false openOnFocus=false
maxItems="1" maxItems="1"
on-init="onInit"
on-focus="onFocus" on-focus="onFocus"
on-blur="onBlur" on-blur="onBlur"
select-item="openSelected" select-item="openSelected"}}
update-filter="onUpdateFilter"}}
<button class="gh-nav-search-button" {{action "focusInput"}}><i class="icon-search"></i><span class="sr-only">Search</span></button> <button class="gh-nav-search-button" {{action "focusInput"}}><i class="icon-search"></i><span class="sr-only">Search</span></button>

View File

@ -42,6 +42,7 @@
content=availableTags content=availableTags
optionValuePath="content.uuid" optionValuePath="content.uuid"
optionLabelPath="content.name" optionLabelPath="content.name"
openOnFocus=false
create-item="addTag" create-item="addTag"
remove-item="removeTag"}} remove-item="removeTag"}}
</div> </div>