Fixes empty menu when typing on search input for the very first time

app/assets/javascripts/search_autocomplete.js.coffee

@@ -31,6 +31,8 @@ class @SearchAutocomplete
 
     @saveOriginalState()
 
+    @createAutocomplete()
+
     @searchInput.addClass('disabled')
     @autocomplete = false
 
@@ -43,32 +45,7 @@ class @SearchAutocomplete
   saveOriginalState: ->
     @originalState = @serializeState()
 
-  serializeState: ->
-    {
-      # Search Criteria
-      project_id: @projectInputEl.val()
-      group_id: @groupInputEl.val()
-      search_code: @searchCodeInputEl.val()
-      repository_ref: @repositoryInputEl.val()
-      scope: @scopeInputEl.val()
-
-      # Location badge
-      _location: $.trim(@locationText.text())
-    }
-
-  bindEvents: ->
-    @searchInput.on 'keydown', @onSearchInputKeyDown
-    @searchInput.on 'focus', @onSearchInputFocus
-    @searchInput.on 'blur', @onSearchInputBlur
-    @clearInput.on 'click', @onRemoveLocationClick
-
-  enableAutocomplete: ->
-    return if @autocomplete
-
-    dropdownMenu = @dropdown.find('.dropdown-menu')
-    _this = @
-    loading = false
-
+  createAutocomplete: ->
     @searchInput.glDropdown
         filterInputBlur: false
         filterable: true
@@ -77,22 +54,26 @@ class @SearchAutocomplete
         filterInput: 'input#search'
         search:
           fields: ['text']
-        data: (term, callback) ->
+        data: @getData.bind(@)
+
+  getData: (term, callback) ->
+    _this = @
+
     # Ensure this is not called when autocomplete is disabled because
     # this method still will be called because `GitLabDropdownFilter` is triggering this on keyup
-          return if _this.autocomplete is false
+    return if @autocomplete is false
 
     # Do not trigger request if input is empty
-          return if _this.searchInput.val() is ''
+    return if @searchInput.val() is ''
 
     # Prevent multiple ajax calls
-          return if loading
+    return if @loadingSuggestions
 
-          loading = true
+    @loadingSuggestions = true
 
-          jqXHR = $.get(_this.autocompletePath, {
-              project_id: _this.projectId
-              project_ref: _this.projectRef
+    jqXHR = $.get(@autocompletePath, {
+        project_id: @projectId
+        project_ref: @projectRef
         term: term
       }, (response) ->
         data = []
@@ -113,7 +94,34 @@ class @SearchAutocomplete
 
         callback(data)
     ).always ->
-            loading = false
+      _this.loadingSuggestions = false
+
+  serializeState: ->
+    {
+      # Search Criteria
+      project_id: @projectInputEl.val()
+      group_id: @groupInputEl.val()
+      search_code: @searchCodeInputEl.val()
+      repository_ref: @repositoryInputEl.val()
+      scope: @scopeInputEl.val()
+
+      # Location badge
+      _location: $.trim(@locationText.text())
+    }
+
+  bindEvents: ->
+    @searchInput.on 'keyup', @onSearchInputKeyUp
+    @searchInput.on 'click', @onSearchInputClick
+    @searchInput.on 'focus', @onSearchInputFocus
+    @searchInput.on 'blur', @onSearchInputBlur
+    @clearInput.on 'click', @onRemoveLocationClick
+
+  enableAutocomplete: ->
+    return if @autocomplete
+
+    dropdownMenu = @dropdown.find('.dropdown-menu')
+    _this = @
+    @loadingSuggestions = false
 
     @dropdown.addClass('open')
     @searchInput.removeClass('disabled')
@@ -122,7 +130,7 @@ class @SearchAutocomplete
   onDropdownOpen: (e) =>
     @dropdown.dropdown('toggle')
 
-  onSearchInputKeyDown: (e) =>
+  onSearchInputKeyUp: (e) =>
     switch e.keyCode
       when KEYCODE.BACKSPACE
         if e.currentTarget.value is ''
@@ -139,11 +147,18 @@ class @SearchAutocomplete
         if @badgePresent()
           @disableAutocomplete()
         else
+
+          # We should display the menu only when input is not empty
+          if @searchInput.val() isnt ''
             @enableAutocomplete()
 
     # Avoid falsy value to be returned
     return
 
+  onSearchInputClick: =>
+    if (@searchInput.val() is '')
+      @disableAutocomplete()
+
   onSearchInputFocus: =>
     @wrap.addClass('search-active')
 

app/views/layouts/_search.html.haml

@@ -15,7 +15,10 @@
         .dropdown{ data: {url: search_autocomplete_path } }
           = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off',  data: { toggle: 'dropdown' }
           .dropdown-menu.dropdown-select
-            = dropdown_content
+            = dropdown_content do
+              %li
+                %a.is-focused
+                  Loading...
             = dropdown_loading
         %i.search-icon
         %i.clear-icon.js-clear-input