From 9cf2dc21c0898a190a1e2039042fd79196079276 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 1 Sep 2015 09:53:10 +0100
Subject: [PATCH] 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
---
 app/components/gh-search-input.js            | 17 -----------------
 app/components/gh-selectize.js               | 20 ++++++++++++++++++++
 app/templates/components/gh-search-input.hbs |  4 +---
 app/templates/post-settings-menu.hbs         |  1 +
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/components/gh-search-input.js b/app/components/gh-search-input.js
index 48908f070..052c77590 100644
--- a/app/components/gh-search-input.js
+++ b/app/components/gh-search-input.js
@@ -124,23 +124,6 @@ export default Ember.Component.extend({
 
         onBlur: function () {
             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();
-            }
         }
     }
 
diff --git a/app/components/gh-selectize.js b/app/components/gh-selectize.js
index b540cd797..f5d332018 100644
--- a/app/components/gh-selectize.js
+++ b/app/components/gh-selectize.js
@@ -3,6 +3,26 @@ import EmberSelectizeComponent from 'ember-cli-selectize/components/ember-select
 
 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
     * - modified to pass the caret position to the action
diff --git a/app/templates/components/gh-search-input.hbs b/app/templates/components/gh-search-input.hbs
index 8724f901a..6f188c140 100644
--- a/app/templates/components/gh-search-input.hbs
+++ b/app/templates/components/gh-search-input.hbs
@@ -8,9 +8,7 @@
     optionGroupPath="content.category"
     openOnFocus=false
     maxItems="1"
-    on-init="onInit"
     on-focus="onFocus"
     on-blur="onBlur"
-    select-item="openSelected"
-    update-filter="onUpdateFilter"}}
+    select-item="openSelected"}}
 <button class="gh-nav-search-button" {{action "focusInput"}}><i class="icon-search"></i><span class="sr-only">Search</span></button>
diff --git a/app/templates/post-settings-menu.hbs b/app/templates/post-settings-menu.hbs
index 2c9f92c06..33e3c26d7 100644
--- a/app/templates/post-settings-menu.hbs
+++ b/app/templates/post-settings-menu.hbs
@@ -42,6 +42,7 @@
                     content=availableTags
                     optionValuePath="content.uuid"
                     optionLabelPath="content.name"
+                    openOnFocus=false
                     create-item="addTag"
                     remove-item="removeTag"}}
             </div>