From b4398de5c5381a81f225c390e32f99d4e0e7d627 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Sun, 15 May 2016 00:50:15 +0100
Subject: Added new non-selectable selector exclusions to fix arrow key events,
 fixed the simulated clicking of a row and fixed the conflict between enter
 key form submit and enter key row selection

Added bootstrap dropdown event triggers to invoke the open and close methods of the dropdown, allowing for the binding of array key events

Added #17465 fix entry to CHANGELOG

Fixed multi-dropdown selected row index conflict

Fixed whitespace diff

Added padding to the dropdown content iterative scroll as well as new conditional scrolls to scroll all the way to the top when the first item of a list is selected and to scroll all the way to the bottom when the last item of a list is selected

Added conditionals to the enable and disable autocomplete methods to stop multiple invocations without any enabled/disabled state change

Fixes some incorrect firing of requests. The dropdown box was invoking a new query every time it closed and the GitLabDropdownRemote callback was invoking a new query which was causing the dropdown double render issue.

Added .selectable css class to dropdown list items that are not dividers or headers and altered selectors to account for that. Moved scroll padding Number to variable.

Removed unused method

Started Dropdown tests

Added fixture and began first test

Almost finished, navigation done, action and close needed

YAY. TESTS DONE.

Altered test and fixed click

started removing selectable class use

Fixed as reviewed

altered selection method

Fixed autocomplete shutting dropdown on arrow key use

patched XSS vulns

updated tests

f

Added click fixes
---
 app/assets/javascripts/gl_dropdown.js.coffee       | 657 +++++++++++++++++++++
 .../javascripts/search_autocomplete.js.coffee      | 349 +++++++++++
 spec/javascripts/fixtures/gl_dropdown.html.haml    |  16 +
 spec/javascripts/gl_dropdown_spec.js.coffee        |  96 +++
 4 files changed, 1118 insertions(+)
 create mode 100644 app/assets/javascripts/gl_dropdown.js.coffee
 create mode 100644 app/assets/javascripts/search_autocomplete.js.coffee
 create mode 100644 spec/javascripts/fixtures/gl_dropdown.html.haml
 create mode 100644 spec/javascripts/gl_dropdown_spec.js.coffee

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
new file mode 100644
index 00000000000..e096effaade
--- /dev/null
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -0,0 +1,657 @@
+class GitLabDropdownFilter
+  BLUR_KEYCODES = [27, 40]
+  ARROW_KEY_CODES = [38, 40]
+  HAS_VALUE_CLASS = "has-value"
+
+  constructor: (@input, @options) ->
+    {
+      @filterInputBlur = true
+    } = @options
+
+    $inputContainer = @input.parent()
+    $clearButton = $inputContainer.find('.js-dropdown-input-clear')
+
+    @indeterminateIds = []
+
+    # Clear click
+    $clearButton.on 'click', (e) =>
+      e.preventDefault()
+      e.stopPropagation()
+      @input
+        .val('')
+        .trigger('keyup')
+        .focus()
+
+    # Key events
+    timeout = ""
+    @input.on "keyup", (e) =>
+      keyCode = e.which
+
+      return if ARROW_KEY_CODES.indexOf(keyCode) >= 0
+
+      if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
+        $inputContainer.addClass HAS_VALUE_CLASS
+      else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
+        $inputContainer.removeClass HAS_VALUE_CLASS
+
+      if keyCode is 13
+        return false
+
+      # Only filter asynchronously only if option remote is set
+      if @options.remote
+        clearTimeout timeout
+        timeout = setTimeout =>
+          blur_field = @shouldBlur keyCode
+
+          if blur_field and @filterInputBlur
+            @input.blur()
+
+          @options.query @input.val(), (data) =>
+            @options.callback(data)
+        , 250
+      else
+        @filter @input.val()
+
+  shouldBlur: (keyCode) ->
+    return BLUR_KEYCODES.indexOf(keyCode) >= 0
+
+  filter: (search_text) ->
+    @options.onFilter(search_text) if @options.onFilter
+    data = @options.data()
+
+    if data? and not @options.filterByText
+      results = data
+
+      if search_text isnt ''
+        # When data is an array of objects therefore [object Array] e.g.
+        # [
+        #   { prop: 'foo' },
+        #   { prop: 'baz' }
+        # ]
+        if _.isArray(data)
+          results = fuzzaldrinPlus.filter(data, search_text,
+            key: @options.keys
+          )
+        else
+          # If data is grouped therefore an [object Object]. e.g.
+          # {
+          #   groupName1: [
+          #     { prop: 'foo' },
+          #     { prop: 'baz' }
+          #   ],
+          #   groupName2: [
+          #     { prop: 'abc' },
+          #     { prop: 'def' }
+          #   ]
+          # }
+          if gl.utils.isObject data
+            results = {}
+            for key, group of data
+              tmp = fuzzaldrinPlus.filter(group, search_text,
+                key: @options.keys
+              )
+
+              if tmp.length
+                results[key] = tmp.map (item) -> item
+
+      @options.callback results
+    else
+      elements = @options.elements()
+
+      if search_text
+        elements.each ->
+          $el = $(@)
+          matches = fuzzaldrinPlus.match($el.text().trim(), search_text)
+
+          unless $el.is('.dropdown-header')
+            if matches.length
+              $el.show()
+            else
+              $el.hide()
+      else
+        elements.show()
+
+class GitLabDropdownRemote
+  constructor: (@dataEndpoint, @options) ->
+
+  execute: ->
+    if typeof @dataEndpoint is "string"
+      @fetchData()
+    else if typeof @dataEndpoint is "function"
+      if @options.beforeSend
+        @options.beforeSend()
+
+      # Fetch the data by calling the data funcfion
+      @dataEndpoint "", (data) =>
+        if @options.success
+          @options.success(data)
+
+        if @options.beforeSend
+          @options.beforeSend()
+
+  # Fetch the data through ajax if the data is a string
+  fetchData: ->
+    $.ajax(
+      url: @dataEndpoint,
+      dataType: @options.dataType,
+      beforeSend: =>
+        if @options.beforeSend
+          @options.beforeSend()
+      success: (data) =>
+        if @options.success
+          @options.success(data)
+    )
+
+class GitLabDropdown
+  LOADING_CLASS = "is-loading"
+  PAGE_TWO_CLASS = "is-page-two"
+  ACTIVE_CLASS = "is-active"
+  INDETERMINATE_CLASS = "is-indeterminate"
+  NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
+  SELECTABLE_CLASSES = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
+  FILTER_INPUT = '.dropdown-input .dropdown-input-field'
+  currentIndex = -1
+  CURSOR_SELECT_SCROLL_PADDING = 5
+
+  constructor: (@el, @options) ->
+    self = @
+    selector = $(@el).data "target"
+    @dropdown = if selector? then $(selector) else $(@el).parent()
+
+    # Set Defaults
+    {
+      # If no input is passed create a default one
+      @filterInput = @getElement(FILTER_INPUT)
+      @highlight = false
+      @filterInputBlur = true
+    } = @options
+
+    self = @
+
+    # If selector was passed
+    if _.isString(@filterInput)
+      @filterInput = @getElement(@filterInput)
+
+    searchFields = if @options.search then @options.search.fields else []
+
+    if @options.data
+      # If we provided data
+      # data could be an array of objects or a group of arrays
+      if _.isObject(@options.data) and not _.isFunction(@options.data)
+        @fullData = @options.data
+        @parseData @options.data
+      else
+        # Remote data
+        @remote = new GitLabDropdownRemote @options.data, {
+          dataType: @options.dataType,
+          beforeSend: @toggleLoading.bind(@)
+          success: (data) =>
+            @fullData = data
+
+            # Reset selected row index on new data
+            currentIndex = -1
+            @parseData @fullData
+
+            @filter.input.trigger('keyup') if @options.filterable and @filter and @filter.input
+        }
+
+    # Init filterable
+    if @options.filterable
+      @filter = new GitLabDropdownFilter @filterInput,
+        filterInputBlur: @filterInputBlur
+        filterByText: @options.filterByText
+        onFilter: @options.onFilter
+        remote: @options.filterRemote
+        query: @options.data
+        keys: searchFields
+        elements: =>
+          selector = SELECTABLE_CLASSES
+
+          if @dropdown.find('.dropdown-toggle-page').length
+            selector = ".dropdown-page-one #{selector}"
+
+          return $(selector)
+        data: =>
+          return @fullData
+        callback: (data) =>
+          @parseData data
+
+          unless @filterInput.val() is ''
+            selector = '.dropdown-content li:not(.divider):visible'
+
+            if @dropdown.find('.dropdown-toggle-page').length
+              selector = ".dropdown-page-one #{selector}"
+
+            $(selector, @dropdown)
+              .first()
+              .find('a')
+              .addClass('is-focused')
+
+            currentIndex = 0
+
+
+    # Event listeners
+
+    @dropdown.on "shown.bs.dropdown", @opened
+    @dropdown.on "hidden.bs.dropdown", @hidden
+    $(@el).on "update.label", @updateLabel
+    @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
+    @dropdown.on 'keyup', (e) =>
+      if e.which is 27 # Escape key
+        $('.dropdown-menu-close', @dropdown).trigger 'click'
+    @dropdown.on 'blur', 'a', (e) =>
+      if e.relatedTarget?
+        $relatedTarget = $(e.relatedTarget)
+        $dropdownMenu = $relatedTarget.closest('.dropdown-menu')
+
+        if $dropdownMenu.length is 0
+          @dropdown.removeClass('open')
+
+    if @dropdown.find(".dropdown-toggle-page").length
+      @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
+        e.preventDefault()
+        e.stopPropagation()
+
+        @togglePage()
+
+    if @options.selectable
+      selector = ".dropdown-content a"
+
+      if @dropdown.find(".dropdown-toggle-page").length
+        selector = ".dropdown-page-one .dropdown-content a"
+
+      @dropdown.on "click", selector, (e) ->
+        $el = $(@)
+        selected = self.rowClicked $el
+
+        if self.options.clicked
+          self.options.clicked(selected, $el, e)
+
+        $el.trigger('blur')
+
+  # Finds an element inside wrapper element
+  getElement: (selector) ->
+    @dropdown.find selector
+
+  toggleLoading: ->
+    $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS
+
+  togglePage: ->
+    menu = $('.dropdown-menu', @dropdown)
+
+    if menu.hasClass(PAGE_TWO_CLASS)
+      if @remote
+        @remote.execute()
+
+    menu.toggleClass PAGE_TWO_CLASS
+
+    # Focus first visible input on active page
+    @dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus()
+
+  parseData: (data) ->
+    @renderedData = data
+
+    if @options.filterable and data.length is 0
+      # render no matching results
+      html = [@noResults()]
+    else
+      # Handle array groups
+      if gl.utils.isObject data
+        html = []
+        for name, groupData of data
+          # Add header for each group
+          html.push(@renderItem(header: name, name))
+
+          @renderData(groupData, name)
+            .map (item) ->
+              html.push item
+      else
+        # Render each row
+        html = @renderData(data)
+
+    # Render the full menu
+    full_html = @renderMenu(html)
+
+    @appendMenu(full_html)
+
+  renderData: (data, group = false) ->
+    data.map (obj, index) =>
+      return @renderItem(obj, group, index)
+
+  shouldPropagate: (e) =>
+    if @options.multiSelect
+      $target = $(e.target)
+
+      if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
+        e.stopPropagation()
+        return false
+      else
+        return true
+
+  opened: =>
+    @resetRows()
+    @addArrowKeyEvent()
+
+    if @options.setIndeterminateIds
+      @options.setIndeterminateIds.call(@)
+
+    if @options.setActiveIds
+      @options.setActiveIds.call(@)
+
+    # Makes indeterminate items effective
+    if @fullData and @dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')
+      @parseData @fullData
+
+    contentHtml = $('.dropdown-content', @dropdown).html()
+    if @remote && contentHtml is ""
+      @remote.execute()
+
+    if @options.filterable
+      @filterInput.focus()
+
+    @dropdown.trigger('shown.gl.dropdown')
+
+  hidden: (e) =>
+    @resetRows()
+    @removeArrayKeyEvent()
+
+    $input = @dropdown.find(".dropdown-input-field")
+
+    if @options.filterable
+      $input
+        .blur()
+        .val("")
+
+    # Triggering 'keyup' will re-render the dropdown which is not always required
+    # specially if we want to keep the state of the dropdown needed for bulk-assignment
+    if not @options.persistWhenHide
+      $input.trigger("keyup")
+
+    if @dropdown.find(".dropdown-toggle-page").length
+      $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
+
+    if @options.hidden
+      @options.hidden.call(@,e)
+
+    @dropdown.trigger('hidden.gl.dropdown')
+
+
+  # Render the full menu
+  renderMenu: (html) ->
+    menu_html = ""
+
+    if @options.renderMenu
+      menu_html = @options.renderMenu(html)
+    else
+      menu_html = $('<ul />')
+        .append(html)
+
+    return menu_html
+
+  # Append the menu into the dropdown
+  appendMenu: (html) ->
+    selector = '.dropdown-content'
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one .dropdown-content"
+    $(selector, @dropdown)
+      .empty()
+      .append(html)
+
+  # Render the row
+  renderItem: (data, group = false, index = false) ->
+    html = ""
+
+    # Divider
+    return "<li class='divider'></li>" if data is "divider"
+
+    # Separator is a full-width divider
+    return "<li class='separator'></li>" if data is "separator"
+
+    # Header
+    return _.template("<li class='dropdown-header'><%- header %></li>") header: data.header if data.header?
+
+    if @options.renderRow
+      # Call the render function
+      html = @options.renderRow.call(@options, data, @)
+    else
+      if not selected
+        value = if @options.id then @options.id(data) else data.id
+        fieldName = @options.fieldName
+        field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+        if field.length
+          selected = true
+
+      # Set URL
+      if @options.url?
+        url = @options.url(data)
+      else
+        url = if data.url? then data.url else '#'
+
+      # Set Text
+      if @options.text?
+        text = @options.text(data)
+      else
+        text = if data.text? then data.text else ''
+
+      cssClass = ""
+
+      if selected
+        cssClass = "is-active"
+
+      if @highlight
+        text = @highlightTextMatches(text, @filterInput.val())
+
+      if group
+        groupAttrs = "data-group=#{group} data-index=#{index}"
+      else
+        groupAttrs = ''
+      html = _.template("<li>
+        <a href='<%- url %>' <%- groupAttrs %> class='<%- cssClass %>'>
+          <%= text %>
+        </a>
+      </li>")({
+        url: url
+        groupAttrs: groupAttrs
+        cssClass: cssClass
+        text: text
+      })
+
+    return html
+
+  highlightTextMatches: (text, term) ->
+    occurrences = fuzzaldrinPlus.match(text, term)
+    text.split('').map((character, i) ->
+      if i in occurrences then "<b>#{character}</b>" else character
+    ).join('')
+
+  noResults: ->
+    html = "<li class='dropdown-menu-empty-link'>
+      <a href='#' class='is-focused'>
+        No matching results.
+      </a>
+    </li>"
+
+  rowClicked: (el) ->
+    fieldName = @options.fieldName
+    isInput = $(@el).is('input')
+
+    if @renderedData
+      groupName = el.data('group')
+      if groupName
+        selectedIndex = el.data('index')
+        selectedObject = @renderedData[groupName][selectedIndex]
+      else
+        selectedIndex = el.closest('li').index()
+        selectedObject = @renderedData[selectedIndex]
+
+    value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
+
+    if isInput
+      field = $(@el)
+    else
+      field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+
+    if el.hasClass(ACTIVE_CLASS)
+      el.removeClass(ACTIVE_CLASS)
+
+      if isInput
+        field.val('')
+      else
+        field.remove()
+
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        @updateLabel(selectedObject, el, @)
+      else
+        selectedObject
+    else if el.hasClass(INDETERMINATE_CLASS)
+      el.addClass ACTIVE_CLASS
+      el.removeClass INDETERMINATE_CLASS
+
+      if not value?
+        field.remove()
+
+      if not field.length and fieldName
+        @addInput(fieldName, value)
+
+      return selectedObject
+    else
+      if not @options.multiSelect or el.hasClass('dropdown-clear-active')
+        @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
+
+        unless isInput
+          @dropdown.parent().find("input[name='#{fieldName}']").remove()
+
+      if !value?
+        field.remove()
+
+      # Toggle active class for the tick mark
+      el.addClass ACTIVE_CLASS
+
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        @updateLabel(selectedObject, el, @)
+      if value?
+        if !field.length and fieldName
+          @addInput(fieldName, value)
+        else
+          field
+            .val value
+            .trigger 'change'
+
+      return selectedObject
+
+  addInput: (fieldName, value)->
+    # Create hidden input for form
+    $input = $('<input>').attr('type', 'hidden')
+                         .attr('name', fieldName)
+                        .val(value)
+
+    if @options.inputId?
+      $input.attr('id', @options.inputId)
+
+    @dropdown.before $input
+
+  selectRowAtIndex: (e, index) ->
+    # Dropdown list item link selector, excluding non-selectable list items
+    selector = "#{SELECTABLE_CLASSES}:eq(#{index}) a"
+
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one #{selector}"
+
+    # simulate a click on the first link
+    $el = $(selector, @dropdown)
+    if $el.length
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      $el.first().trigger 'click'
+      href = $el.attr 'href'
+      Turbolinks.visit(href) if href
+
+  addArrowKeyEvent: ->
+    ARROW_KEY_CODES = [38, 40]
+    $input = @dropdown.find(".dropdown-input-field")
+
+    # Dropdown list item selector, excluding non-selectable list items
+    selector = SELECTABLE_CLASSES
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one #{selector}"
+
+    $('body').on 'keydown', (e) =>
+      currentKeyCode = e.which
+
+      if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0
+        e.preventDefault()
+        e.stopImmediatePropagation()
+
+        PREV_INDEX = currentIndex
+        $listItems = $(selector, @dropdown)
+
+        # if @options.filterable
+        #   $input.blur()
+
+        if currentKeyCode is 40
+          # Move down
+          currentIndex += 1 if currentIndex < ($listItems.length - 1)
+        else if currentKeyCode is 38
+          # Move up
+          currentIndex -= 1 if currentIndex > 0
+
+        @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
+
+        return false
+
+      # If enter is pressed and a row is highlighted, select it
+      if currentKeyCode is 13 and currentIndex != -1
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        @selectRowAtIndex e, currentIndex
+
+  removeArrayKeyEvent: ->
+    $('body').off 'keydown'
+
+  # Resets the currently selected item row index and removes all highlights
+  resetRows: ->
+    currentIndex = -1
+    $('.is-focused', @dropdown).removeClass 'is-focused'
+
+  highlightRowAtIndex: ($listItems, index) ->
+    # Remove the class for the previously focused row
+    $('.is-focused', @dropdown).removeClass 'is-focused'
+
+    # Update the class for the row at the specific index
+    $listItem = $listItems.eq(index)
+    $listItem.find('a:first-child').addClass "is-focused"
+
+    # Dropdown content scroll area
+    $dropdownContent = $listItem.closest('.dropdown-content')
+    dropdownScrollTop = $dropdownContent.scrollTop()
+    dropdownContentHeight = $dropdownContent.outerHeight()
+    dropdownContentTop = $dropdownContent.prop('offsetTop')
+    dropdownContentBottom = dropdownContentTop + dropdownContentHeight
+
+    # Get the offset bottom of the list item
+    listItemHeight = $listItem.outerHeight()
+    listItemTop = $listItem.prop('offsetTop')
+    listItemBottom = listItemTop + listItemHeight
+
+    if index is 0
+      # If this is the first item in the list, scroll to the top
+      $dropdownContent.scrollTop(0)
+    else if index is $listItems.length - 1
+      # If this is the last item in the list, scroll to the bottom
+      $dropdownContent.scrollTop($dropdownContent[0].scrollHeight)
+    else if listItemBottom > dropdownContentBottom + dropdownScrollTop
+      # Scroll the dropdown content down with a little padding
+      $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING)
+    else if listItemTop < dropdownContentTop + dropdownScrollTop
+      # Scroll the dropdown content up with a little padding
+      $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING)
+
+  updateLabel: (selected = null, el = null, instance = null) =>
+    $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selected, el, instance)
+
+$.fn.glDropdown = (opts) ->
+  return @.each ->
+    if (!$.data @, 'glDropdown')
+      $.data(@, 'glDropdown', new GitLabDropdown @, opts)
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
new file mode 100644
index 00000000000..a3baea1ae01
--- /dev/null
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -0,0 +1,349 @@
+class @SearchAutocomplete
+
+  KEYCODE =
+    ESCAPE: 27
+    BACKSPACE: 8
+    ENTER: 13
+    UP: 38
+    DOWN: 40
+
+  constructor: (opts = {}) ->
+    {
+      @wrap = $('.search')
+
+      @optsEl = @wrap.find('.search-autocomplete-opts')
+      @autocompletePath = @optsEl.data('autocomplete-path')
+      @projectId = @optsEl.data('autocomplete-project-id') || ''
+      @projectRef = @optsEl.data('autocomplete-project-ref') || ''
+
+    } = opts
+
+    # Dropdown Element
+    @dropdown = @wrap.find('.dropdown')
+    @dropdownContent = @dropdown.find('.dropdown-content')
+
+    @locationBadgeEl = @getElement('.location-badge')
+    @scopeInputEl = @getElement('#scope')
+    @searchInput = @getElement('.search-input')
+    @projectInputEl = @getElement('#search_project_id')
+    @groupInputEl = @getElement('#group_id')
+    @searchCodeInputEl = @getElement('#search_code')
+    @repositoryInputEl = @getElement('#repository_ref')
+    @clearInput = @getElement('.js-clear-input')
+
+    @saveOriginalState()
+
+    # Only when user is logged in
+    @createAutocomplete() if gon.current_user_id
+
+    @searchInput.addClass('disabled')
+
+    @saveTextLength()
+
+    @bindEvents()
+
+  # Finds an element inside wrapper element
+  getElement: (selector) ->
+    @wrap.find(selector)
+
+  saveOriginalState: ->
+    @originalState = @serializeState()
+
+  saveTextLength: ->
+    @lastTextLength = @searchInput.val().length
+
+  createAutocomplete: ->
+    @searchInput.glDropdown
+        filterInputBlur: false
+        filterable: true
+        filterRemote: true
+        highlight: true
+        enterCallback: false
+        filterInput: 'input#search'
+        search:
+          fields: ['text']
+        data: @getData.bind(@)
+        selectable: true
+        clicked: @onClick.bind(@)
+
+  getData: (term, callback) ->
+    _this = @
+
+    unless term
+      if contents = @getCategoryContents()
+        @searchInput.data('glDropdown').filter.options.callback contents
+        @enableAutocomplete()
+
+      return
+
+    # Prevent multiple ajax calls
+    return if @loadingSuggestions
+
+    @loadingSuggestions = true
+
+    jqXHR = $.get(@autocompletePath, {
+        project_id: @projectId
+        project_ref: @projectRef
+        term: term
+      }, (response) ->
+        # Hide dropdown menu if no suggestions returns
+        if !response.length
+          _this.disableAutocomplete()
+          return
+
+        data = []
+
+        # List results
+        firstCategory = true
+        for suggestion in response
+
+          # Add group header before list each group
+          if lastCategory isnt suggestion.category
+            data.push 'separator' if !firstCategory
+
+            firstCategory = false if firstCategory
+
+            data.push
+              header: suggestion.category
+
+            lastCategory = suggestion.category
+
+          data.push
+            id: "#{suggestion.category.toLowerCase()}-#{suggestion.id}"
+            category: suggestion.category
+            text: suggestion.label
+            url: suggestion.url
+
+        # Add option to proceed with the search
+        if data.length
+          data.push('separator')
+          data.push
+            text: "Result name contains \"#{term}\""
+            url: "/search?\
+                  search=#{term}\
+                  &project_id=#{_this.projectInputEl.val()}\
+                  &group_id=#{_this.groupInputEl.val()}"
+
+        callback(data)
+    ).always ->
+      _this.loadingSuggestions = false
+
+
+  getCategoryContents: ->
+
+    userId = gon.current_user_id
+    { utils, projectOptions, groupOptions, dashboardOptions } = gl
+
+    if utils.isInGroupsPage() and groupOptions
+      options = groupOptions[utils.getGroupSlug()]
+
+    else if utils.isInProjectPage() and projectOptions
+      options = projectOptions[utils.getProjectSlug()]
+
+    else if dashboardOptions
+      options = dashboardOptions
+
+    { issuesPath, mrPath, name } = options
+
+    items = [
+      { header: "#{name}" }
+      { text: 'Issues assigned to me', url: "#{issuesPath}/?assignee_id=#{userId}" }
+      { text: "Issues I've created",   url: "#{issuesPath}/?author_id=#{userId}"   }
+      'separator'
+      { text: 'Merge requests assigned to me', url: "#{mrPath}/?assignee_id=#{userId}" }
+      { text: "Merge requests I've created",   url: "#{mrPath}/?author_id=#{userId}"   }
+    ]
+
+    items.splice 0, 1 unless name
+
+    return items
+
+
+  serializeState: ->
+    {
+      # Search Criteria
+      search_project_id: @projectInputEl.val()
+      group_id: @groupInputEl.val()
+      search_code: @searchCodeInputEl.val()
+      repository_ref: @repositoryInputEl.val()
+      scope: @scopeInputEl.val()
+
+      # Location badge
+      _location: @locationBadgeEl.text()
+    }
+
+  bindEvents: ->
+    @searchInput.on 'keydown', @onSearchInputKeyDown
+    @searchInput.on 'keyup', @onSearchInputKeyUp
+    @searchInput.on 'click', @onSearchInputClick
+    @searchInput.on 'focus', @onSearchInputFocus
+    @searchInput.on 'blur', @onSearchInputBlur
+    @clearInput.on 'click', @onClearInputClick
+    @locationBadgeEl.on 'click', =>
+      @searchInput.focus()
+
+  enableAutocomplete: ->
+    # No need to enable anything if user is not logged in
+    return if !gon.current_user_id
+
+    unless @dropdown.hasClass('open')
+      _this = @
+      @loadingSuggestions = false
+
+    # If not enabled already, enable
+    if not @dropdown.hasClass('open')
+      # Open dropdown and invoke its opened() method
+      @dropdown.addClass('open')
+        .trigger('shown.bs.dropdown')
+      @searchInput.removeClass('disabled')
+
+  onSearchInputKeyDown: =>
+    # Saves last length of the entered text
+    @saveTextLength()
+
+  onSearchInputKeyUp: (e) =>
+    switch e.keyCode
+      when KEYCODE.BACKSPACE
+        # when trying to remove the location badge
+        if @lastTextLength is 0 and @badgePresent()
+          @removeLocationBadge()
+
+        # When removing the last character and no badge is present
+        if @lastTextLength is 1
+          @disableAutocomplete()
+
+        # When removing any character from existin value
+        if @lastTextLength > 1
+          @enableAutocomplete()
+
+      when KEYCODE.ESCAPE
+        @restoreOriginalState()
+
+      # Close autocomplete on enter
+      when KEYCODE.ENTER
+        @disableAutocomplete()
+
+      when KEYCODE.UP, KEYCODE.DOWN
+        return
+
+      else
+        # Handle the case when deleting the input value other than backspace
+        # e.g. Pressing ctrl + backspace or ctrl + x
+        if @searchInput.val() is ''
+          @disableAutocomplete()
+        else
+          # We should display the menu only when input is not empty
+          @enableAutocomplete()
+
+    @wrap.toggleClass 'has-value', !!e.target.value
+
+    # Avoid falsy value to be returned
+    return
+
+  onSearchInputClick: (e) =>
+    # Prevents closing the dropdown menu
+    e.stopImmediatePropagation()
+
+  onSearchInputFocus: =>
+    @isFocused = true
+    @wrap.addClass('search-active')
+
+    @getData()  if @getValue() is ''
+
+
+  getValue: -> return @searchInput.val()
+
+
+  onClearInputClick: (e) =>
+    e.preventDefault()
+    @searchInput.val('').focus()
+
+  onSearchInputBlur: (e) =>
+    @isFocused = false
+    @wrap.removeClass('search-active')
+
+    # If input is blank then restore state
+    if @searchInput.val() is ''
+      @restoreOriginalState()
+
+  addLocationBadge: (item) ->
+    category = if item.category? then "#{item.category}: " else ''
+    value = if item.value? then item.value else ''
+
+    badgeText = "#{category}#{value}"
+    @locationBadgeEl.text(badgeText).show()
+    @wrap.addClass('has-location-badge')
+
+
+  hasLocationBadge: -> return @wrap.is '.has-location-badge'
+
+
+  restoreOriginalState: ->
+    inputs = Object.keys @originalState
+
+    for input in inputs
+      @getElement("##{input}").val(@originalState[input])
+
+    if @originalState._location is ''
+      @locationBadgeEl.hide()
+    else
+      @addLocationBadge(
+        value: @originalState._location
+      )
+
+  badgePresent: ->
+    @locationBadgeEl.length
+
+  resetSearchState: ->
+    inputs = Object.keys @originalState
+
+    for input in inputs
+
+      # _location isnt a input
+      break if input is '_location'
+
+      @getElement("##{input}").val('')
+
+
+  removeLocationBadge: ->
+
+    @locationBadgeEl.hide()
+    @resetSearchState()
+    @wrap.removeClass('has-location-badge')
+    @disableAutocomplete()
+
+
+  disableAutocomplete: ->
+    # If not disabled already, disable
+    if not @searchInput.hasClass('disabled') && @dropdown.hasClass('open')
+      @searchInput.addClass('disabled')
+      # Close dropdown and invoke its hidden() method
+      @dropdown.removeClass('open')
+        .trigger('hidden.bs.dropdown')
+      @restoreMenu()
+
+  restoreMenu: ->
+    html = "<ul>
+              <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
+            </ul>"
+    @dropdownContent.html(html)
+
+  onClick: (item, $el, e) ->
+    if location.pathname.indexOf(item.url) isnt -1
+      e.preventDefault()
+      if not @badgePresent
+        if item.category is 'Projects'
+          @projectInputEl.val(item.id)
+          @addLocationBadge(
+            value: 'This project'
+          )
+
+        if item.category is 'Groups'
+          @groupInputEl.val(item.id)
+          @addLocationBadge(
+            value: 'This group'
+          )
+
+      $el.removeClass('is-active')
+      @disableAutocomplete()
+      @searchInput.val('').focus()
diff --git a/spec/javascripts/fixtures/gl_dropdown.html.haml b/spec/javascripts/fixtures/gl_dropdown.html.haml
new file mode 100644
index 00000000000..a20390c08ee
--- /dev/null
+++ b/spec/javascripts/fixtures/gl_dropdown.html.haml
@@ -0,0 +1,16 @@
+%div
+  .dropdown.inline
+    %button#js-project-dropdown.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+      Projects
+      %i.fa.fa-chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle
+    .dropdown-menu.dropdown-select.dropdown-menu-selectable
+      .dropdown-title
+        %span Go to project
+        %button.dropdown-title-button.dropdown-menu-close{aria: {label: 'Close'}}
+          %i.fa.fa-times.dropdown-menu-close-icon
+      .dropdown-input
+        %input.dropdown-input-field{type: 'search', placeholder: 'Filter results'}
+        %i.fa.fa-search.dropdown-input-search
+      .dropdown-content
+      .dropdown-loading
+        %i.fa.fa-spinner.fa-spin
diff --git a/spec/javascripts/gl_dropdown_spec.js.coffee b/spec/javascripts/gl_dropdown_spec.js.coffee
new file mode 100644
index 00000000000..46a0af32a7d
--- /dev/null
+++ b/spec/javascripts/gl_dropdown_spec.js.coffee
@@ -0,0 +1,96 @@
+#= require jquery
+#= require gl_dropdown
+#= require turbolinks
+#= require lib/utils/common_utils
+#= require lib/utils/type_utility
+
+NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
+ITEM_SELECTOR = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
+FOCUSED_ITEM_SELECTOR = ITEM_SELECTOR + ' a.is-focused'
+
+ARROW_KEYS =
+  DOWN: 40
+  UP: 38
+  ENTER: 13
+  ESC: 27
+
+navigateWithKeys = (direction, steps, cb, i) ->
+  i = i || 0
+  $('body').trigger
+    type: 'keydown'
+    which: ARROW_KEYS[direction.toUpperCase()]
+    keyCode: ARROW_KEYS[direction.toUpperCase()]
+  i++
+  if i <= steps
+    navigateWithKeys direction, steps, cb, i
+  else
+    cb()
+
+initDropdown = ->
+  @dropdownContainerElement = $('.dropdown.inline')
+  @dropdownMenuElement = $('.dropdown-menu', @dropdownContainerElement)
+  @projectsData = fixture.load('projects.json')[0]
+  @dropdownButtonElement = $('#js-project-dropdown', @dropdownContainerElement).glDropdown
+    selectable: true
+    data: @projectsData
+    text: (project) ->
+      (project.name_with_namespace or project.name)
+    id: (project) ->
+      project.id
+
+describe 'Dropdown', ->
+  fixture.preload 'gl_dropdown.html'
+  fixture.preload 'projects.json'
+
+  beforeEach ->
+    fixture.load 'gl_dropdown.html'
+    initDropdown.call this
+
+  afterEach ->
+    $('body').unbind 'keydown'
+    @dropdownContainerElement.unbind 'keyup'
+
+  it 'should open on click', ->
+    expect(@dropdownContainerElement).not.toHaveClass 'open'
+    @dropdownButtonElement.click()
+    expect(@dropdownContainerElement).toHaveClass 'open'
+
+  describe 'that is open', ->
+    beforeEach ->
+      @dropdownButtonElement.click()
+
+    it 'should select a following item on DOWN keypress', ->
+      expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 0
+      randomIndex = Math.floor(Math.random() * (@projectsData.length - 1)) + 0
+      navigateWithKeys 'down', randomIndex, =>
+        expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
+        expect($("#{ITEM_SELECTOR}:eq(#{randomIndex}) a", @dropdownMenuElement)).toHaveClass 'is-focused'
+
+    it 'should select a previous item on UP keypress', ->
+      expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 0
+      navigateWithKeys 'down', (@projectsData.length - 1), =>
+        expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
+        randomIndex = Math.floor(Math.random() * (@projectsData.length - 2)) + 0
+        navigateWithKeys 'up', randomIndex, =>
+          expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
+          expect($("#{ITEM_SELECTOR}:eq(#{((@projectsData.length - 2) - randomIndex)}) a", @dropdownMenuElement)).toHaveClass 'is-focused'
+
+    it 'should click the selected item on ENTER keypress', ->
+      expect(@dropdownContainerElement).toHaveClass 'open'
+      randomIndex = Math.floor(Math.random() * (@projectsData.length - 1)) + 0
+      navigateWithKeys 'down', randomIndex, =>
+        spyOn(Turbolinks, 'visit').and.stub()
+        navigateWithKeys 'enter', null, =>
+          link = $("#{ITEM_SELECTOR}:eq(#{randomIndex}) a", @dropdownMenuElement)
+          expect(link).toHaveClass 'is-active'
+          if link.attr 'href'
+            expect(Turbolinks.visit).toHaveBeenCalledWith link.attr 'href'
+            expect(@dropdownContainerElement).not.toHaveClass 'open'
+
+    it 'should close on ESC keypress', ->
+      expect(@dropdownContainerElement).toHaveClass 'open'
+      @dropdownContainerElement.trigger
+        type: 'keyup'
+        which: ARROW_KEYS.ESC
+        keyCode: ARROW_KEYS.ESC
+      expect(@dropdownContainerElement).not.toHaveClass 'open'
-- 
cgit v1.2.1


From 85cd73c768b57aa13b1cd6fc75b5c855b0b8fe89 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 7 Jul 2016 15:08:34 +0100
Subject: improved turbolinks.visit conditional

---
 app/assets/javascripts/gl_dropdown.js.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index e096effaade..7a4224d9032 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -566,7 +566,7 @@ class GitLabDropdown
       e.stopImmediatePropagation()
       $el.first().trigger 'click'
       href = $el.attr 'href'
-      Turbolinks.visit(href) if href
+      Turbolinks.visit(href) if href and href isnt '#'
 
   addArrowKeyEvent: ->
     ARROW_KEY_CODES = [38, 40]
-- 
cgit v1.2.1


From 40d869eefa2c491446b6aa75ec1337add6ce3e4a Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 7 Jul 2016 22:18:40 +0100
Subject: Review changes and final formatting

---
 app/assets/javascripts/gl_dropdown.js.coffee | 255 ++++++++++++---------------
 1 file changed, 115 insertions(+), 140 deletions(-)

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 7a4224d9032..4e439e0de84 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -1,7 +1,7 @@
 class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
   ARROW_KEY_CODES = [38, 40]
-  HAS_VALUE_CLASS = "has-value"
+  HAS_VALUE_CLASS = 'has-value'
 
   constructor: (@input, @options) ->
     {
@@ -9,7 +9,7 @@ class GitLabDropdownFilter
     } = @options
 
     $inputContainer = @input.parent()
-    $clearButton = $inputContainer.find('.js-dropdown-input-clear')
+    $clearButton = $inputContainer.find '.js-dropdown-input-clear'
 
     @indeterminateIds = []
 
@@ -18,24 +18,23 @@ class GitLabDropdownFilter
       e.preventDefault()
       e.stopPropagation()
       @input
-        .val('')
-        .trigger('keyup')
+        .val ''
+        .trigger 'keyup'
         .focus()
 
     # Key events
-    timeout = ""
-    @input.on "keyup", (e) =>
+    timeout = ''
+    @input.on 'keyup', (e) =>
       keyCode = e.which
 
       return if ARROW_KEY_CODES.indexOf(keyCode) >= 0
 
-      if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
+      if @input.val() isnt '' and not $inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.addClass HAS_VALUE_CLASS
-      else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
+      else if @input.val() is '' and $inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.removeClass HAS_VALUE_CLASS
 
-      if keyCode is 13
-        return false
+      return false if keyCode is 13
 
       # Only filter asynchronously only if option remote is set
       if @options.remote
@@ -47,13 +46,13 @@ class GitLabDropdownFilter
             @input.blur()
 
           @options.query @input.val(), (data) =>
-            @options.callback(data)
+            @options.callback data
         , 250
       else
         @filter @input.val()
 
   shouldBlur: (keyCode) ->
-    return BLUR_KEYCODES.indexOf(keyCode) >= 0
+    BLUR_KEYCODES.indexOf(keyCode) >= 0
 
   filter: (search_text) ->
     @options.onFilter(search_text) if @options.onFilter
@@ -69,9 +68,8 @@ class GitLabDropdownFilter
         #   { prop: 'baz' }
         # ]
         if _.isArray(data)
-          results = fuzzaldrinPlus.filter(data, search_text,
+          results = fuzzaldrinPlus.filter data, search_text,
             key: @options.keys
-          )
         else
           # If data is grouped therefore an [object Object]. e.g.
           # {
@@ -87,9 +85,8 @@ class GitLabDropdownFilter
           if gl.utils.isObject data
             results = {}
             for key, group of data
-              tmp = fuzzaldrinPlus.filter(group, search_text,
+              tmp = fuzzaldrinPlus.filter group, search_text,
                 key: @options.keys
-              )
 
               if tmp.length
                 results[key] = tmp.map (item) -> item
@@ -100,10 +97,10 @@ class GitLabDropdownFilter
 
       if search_text
         elements.each ->
-          $el = $(@)
-          matches = fuzzaldrinPlus.match($el.text().trim(), search_text)
+          $el = $(this)
+          matches = fuzzaldrinPlus.match $el.text().trim(), search_text
 
-          unless $el.is('.dropdown-header')
+          unless $el.is '.dropdown-header'
             if matches.length
               $el.show()
             else
@@ -115,38 +112,31 @@ class GitLabDropdownRemote
   constructor: (@dataEndpoint, @options) ->
 
   execute: ->
-    if typeof @dataEndpoint is "string"
+    if typeof @dataEndpoint is 'string'
       @fetchData()
-    else if typeof @dataEndpoint is "function"
-      if @options.beforeSend
-        @options.beforeSend()
+    else if typeof @dataEndpoint is 'function'
+      @options.beforeSend() if @options.beforeSend
 
       # Fetch the data by calling the data funcfion
-      @dataEndpoint "", (data) =>
-        if @options.success
-          @options.success(data)
-
-        if @options.beforeSend
-          @options.beforeSend()
+      @dataEndpoint '', (data) =>
+        @options.success(data) if @options.success
+        @options.beforeSend() if @options.beforeSend
 
   # Fetch the data through ajax if the data is a string
   fetchData: ->
-    $.ajax(
+    $.ajax
       url: @dataEndpoint,
       dataType: @options.dataType,
       beforeSend: =>
-        if @options.beforeSend
-          @options.beforeSend()
+        @options.beforeSend() if @options.beforeSend
       success: (data) =>
-        if @options.success
-          @options.success(data)
-    )
+        @options.success(data) if @options.success
 
 class GitLabDropdown
-  LOADING_CLASS = "is-loading"
-  PAGE_TWO_CLASS = "is-page-two"
-  ACTIVE_CLASS = "is-active"
-  INDETERMINATE_CLASS = "is-indeterminate"
+  LOADING_CLASS = 'is-loading'
+  PAGE_TWO_CLASS = 'is-page-two'
+  ACTIVE_CLASS = 'is-active'
+  INDETERMINATE_CLASS = 'is-indeterminate'
   NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
   SELECTABLE_CLASSES = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
   FILTER_INPUT = '.dropdown-input .dropdown-input-field'
@@ -154,37 +144,36 @@ class GitLabDropdown
   CURSOR_SELECT_SCROLL_PADDING = 5
 
   constructor: (@el, @options) ->
-    self = @
-    selector = $(@el).data "target"
+    self = this
+    selector = $(@el).data 'target'
     @dropdown = if selector? then $(selector) else $(@el).parent()
 
     # Set Defaults
     {
       # If no input is passed create a default one
-      @filterInput = @getElement(FILTER_INPUT)
+      @filterInput = @getElement FILTER_INPUT
       @highlight = false
       @filterInputBlur = true
     } = @options
 
-    self = @
+    self = this
 
     # If selector was passed
-    if _.isString(@filterInput)
-      @filterInput = @getElement(@filterInput)
+    @filterInput = @getElement(@filterInput) if _.isString @filterInput
 
     searchFields = if @options.search then @options.search.fields else []
 
     if @options.data
       # If we provided data
       # data could be an array of objects or a group of arrays
-      if _.isObject(@options.data) and not _.isFunction(@options.data)
+      if _.isObject(@options.data) and not _.isFunction @options.data
         @fullData = @options.data
         @parseData @options.data
       else
         # Remote data
-        @remote = new GitLabDropdownRemote @options.data, {
+        @remote = new GitLabDropdownRemote @options.data,
           dataType: @options.dataType,
-          beforeSend: @toggleLoading.bind(@)
+          beforeSend: @toggleLoading.bind this
           success: (data) =>
             @fullData = data
 
@@ -192,8 +181,8 @@ class GitLabDropdown
             currentIndex = -1
             @parseData @fullData
 
-            @filter.input.trigger('keyup') if @options.filterable and @filter and @filter.input
-        }
+            if @options.filterable and @filter and @filter.input
+              @filter.input.trigger 'keyup'
 
     # Init filterable
     if @options.filterable
@@ -210,9 +199,9 @@ class GitLabDropdown
           if @dropdown.find('.dropdown-toggle-page').length
             selector = ".dropdown-page-one #{selector}"
 
-          return $(selector)
+          $(selector)
         data: =>
-          return @fullData
+          @fullData
         callback: (data) =>
           @parseData data
 
@@ -232,36 +221,35 @@ class GitLabDropdown
 
     # Event listeners
 
-    @dropdown.on "shown.bs.dropdown", @opened
-    @dropdown.on "hidden.bs.dropdown", @hidden
-    $(@el).on "update.label", @updateLabel
-    @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
+    @dropdown.on 'shown.bs.dropdown', @opened
+    @dropdown.on 'hidden.bs.dropdown', @hidden
+    $(@el).on 'update.label', @updateLabel
+    @dropdown.on 'click', '.dropdown-menu, .dropdown-menu-close', @shouldPropagate
     @dropdown.on 'keyup', (e) =>
-      if e.which is 27 # Escape key
-        $('.dropdown-menu-close', @dropdown).trigger 'click'
+      $('.dropdown-menu-close', @dropdown).trigger 'click' if e.which is 27
+
     @dropdown.on 'blur', 'a', (e) =>
       if e.relatedTarget?
         $relatedTarget = $(e.relatedTarget)
         $dropdownMenu = $relatedTarget.closest('.dropdown-menu')
 
-        if $dropdownMenu.length is 0
-          @dropdown.removeClass('open')
+        @dropdown.removeClass('open') if $dropdownMenu.length is 0
 
-    if @dropdown.find(".dropdown-toggle-page").length
-      @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
+    if @dropdown.find('.dropdown-toggle-page').length
+      @dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on 'click', (e) =>
         e.preventDefault()
         e.stopPropagation()
 
         @togglePage()
 
     if @options.selectable
-      selector = ".dropdown-content a"
+      selector = '.dropdown-content a'
 
-      if @dropdown.find(".dropdown-toggle-page").length
-        selector = ".dropdown-page-one .dropdown-content a"
+      if @dropdown.find('.dropdown-toggle-page').length
+        selector = '.dropdown-page-one .dropdown-content a'
 
-      @dropdown.on "click", selector, (e) ->
-        $el = $(@)
+      @dropdown.on 'click', selector, (e) ->
+        $el = $(this)
         selected = self.rowClicked $el
 
         if self.options.clicked
@@ -280,8 +268,7 @@ class GitLabDropdown
     menu = $('.dropdown-menu', @dropdown)
 
     if menu.hasClass(PAGE_TWO_CLASS)
-      if @remote
-        @remote.execute()
+      @remote.execute() if @remote
 
     menu.toggleClass PAGE_TWO_CLASS
 
@@ -316,38 +303,32 @@ class GitLabDropdown
 
   renderData: (data, group = false) ->
     data.map (obj, index) =>
-      return @renderItem(obj, group, index)
+      @renderItem(obj, group, index)
 
   shouldPropagate: (e) =>
-    if @options.multiSelect
-      $target = $(e.target)
-
-      if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
-        e.stopPropagation()
-        return false
-      else
-        return true
+    $target = $(e.target) if @options.multiSelect
+    unless $target.hasClass('dropdown-menu-close') and $target.hasClass('dropdown-menu-close-icon') and $target.data('is-link')
+      e.stopPropagation()
+      false
+    else
+      true
 
   opened: =>
     @resetRows()
     @addArrowKeyEvent()
 
-    if @options.setIndeterminateIds
-      @options.setIndeterminateIds.call(@)
+    @options.setIndeterminateIds.call this if @options.setIndeterminateIds
 
-    if @options.setActiveIds
-      @options.setActiveIds.call(@)
+    @options.setActiveIds.call this if @options.setActiveIds
 
     # Makes indeterminate items effective
     if @fullData and @dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')
       @parseData @fullData
 
     contentHtml = $('.dropdown-content', @dropdown).html()
-    if @remote && contentHtml is ""
-      @remote.execute()
+    @remote.execute() if @remote and contentHtml is ''
 
-    if @options.filterable
-      @filterInput.focus()
+    @filterInput.focus() if @options.filterable
 
     @dropdown.trigger('shown.gl.dropdown')
 
@@ -355,71 +336,67 @@ class GitLabDropdown
     @resetRows()
     @removeArrayKeyEvent()
 
-    $input = @dropdown.find(".dropdown-input-field")
+    $input = @dropdown.find('.dropdown-input-field')
 
     if @options.filterable
       $input
         .blur()
-        .val("")
+        .val('')
 
     # Triggering 'keyup' will re-render the dropdown which is not always required
     # specially if we want to keep the state of the dropdown needed for bulk-assignment
-    if not @options.persistWhenHide
-      $input.trigger("keyup")
+    $input.trigger('keyup') unless @options.persistWhenHide
 
-    if @dropdown.find(".dropdown-toggle-page").length
+    if @dropdown.find('.dropdown-toggle-page').length
       $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
 
-    if @options.hidden
-      @options.hidden.call(@,e)
+    @options.hidden.call this, e if @options.hidden
 
     @dropdown.trigger('hidden.gl.dropdown')
 
 
   # Render the full menu
   renderMenu: (html) ->
-    menu_html = ""
+    menu_html = ''
 
     if @options.renderMenu
-      menu_html = @options.renderMenu(html)
+      menu_html = @options.renderMenu html
     else
-      menu_html = $('<ul />')
-        .append(html)
+      menu_html = $('<ul/>').append html
 
-    return menu_html
+    menu_html
 
   # Append the menu into the dropdown
   appendMenu: (html) ->
     selector = '.dropdown-content'
-    if @dropdown.find(".dropdown-toggle-page").length
-      selector = ".dropdown-page-one .dropdown-content"
+    if @dropdown.find('.dropdown-toggle-page').length
+      selector = '.dropdown-page-one .dropdown-content'
     $(selector, @dropdown)
       .empty()
-      .append(html)
+      .append html
 
   # Render the row
   renderItem: (data, group = false, index = false) ->
-    html = ""
+    html = ''
 
     # Divider
-    return "<li class='divider'></li>" if data is "divider"
+    return '<li class='divider'></li>' if data is 'divider'
 
     # Separator is a full-width divider
-    return "<li class='separator'></li>" if data is "separator"
+    return '<li class='separator'></li>' if data is 'separator'
 
     # Header
-    return _.template("<li class='dropdown-header'><%- header %></li>") header: data.header if data.header?
+    return _.template('<li class="dropdown-header"><%- header %></li>')({ header: data.header }) if data.header?
 
     if @options.renderRow
       # Call the render function
       html = @options.renderRow.call(@options, data, @)
     else
-      if not selected
+      unless selected
         value = if @options.id then @options.id(data) else data.id
         fieldName = @options.fieldName
         field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
-        if field.length
-          selected = true
+        selected = true if field.length
 
       # Set URL
       if @options.url?
@@ -433,10 +410,9 @@ class GitLabDropdown
       else
         text = if data.text? then data.text else ''
 
-      cssClass = ""
+      cssClass = ''
 
-      if selected
-        cssClass = "is-active"
+      cssClass = 'is-active' if selected
 
       if @highlight
         text = @highlightTextMatches(text, @filterInput.val())
@@ -445,18 +421,18 @@ class GitLabDropdown
         groupAttrs = "data-group=#{group} data-index=#{index}"
       else
         groupAttrs = ''
-      html = _.template("<li>
-        <a href='<%- url %>' <%- groupAttrs %> class='<%- cssClass %>'>
+      html = _.template('<li>
+        <a href="<%- url %>" <%- groupAttrs %> class="<%- cssClass %>">
           <%= text %>
         </a>
-      </li>")({
+      </li>')({
         url: url
         groupAttrs: groupAttrs
         cssClass: cssClass
         text: text
       })
 
-    return html
+    html
 
   highlightTextMatches: (text, term) ->
     occurrences = fuzzaldrinPlus.match(text, term)
@@ -465,20 +441,20 @@ class GitLabDropdown
     ).join('')
 
   noResults: ->
-    html = "<li class='dropdown-menu-empty-link'>
-      <a href='#' class='is-focused'>
+    html = '<li class="dropdown-menu-empty-link">
+      <a href="#" class="is-focused">
         No matching results.
       </a>
-    </li>"
+    </li>'
 
   rowClicked: (el) ->
     fieldName = @options.fieldName
     isInput = $(@el).is('input')
 
     if @renderedData
-      groupName = el.data('group')
+      groupName = el.data 'group'
       if groupName
-        selectedIndex = el.data('index')
+        selectedIndex = el.data 'index'
         selectedObject = @renderedData[groupName][selectedIndex]
       else
         selectedIndex = el.closest('li').index()
@@ -501,20 +477,19 @@ class GitLabDropdown
 
       # Toggle the dropdown label
       if @options.toggleLabel
-        @updateLabel(selectedObject, el, @)
+        @updateLabel(selectedObject, el, this)
       else
         selectedObject
     else if el.hasClass(INDETERMINATE_CLASS)
       el.addClass ACTIVE_CLASS
       el.removeClass INDETERMINATE_CLASS
 
-      if not value?
-        field.remove()
+      field.remove() unless value?
 
       if not field.length and fieldName
         @addInput(fieldName, value)
 
-      return selectedObject
+      selectedObject
     else
       if not @options.multiSelect or el.hasClass('dropdown-clear-active')
         @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
@@ -522,24 +497,23 @@ class GitLabDropdown
         unless isInput
           @dropdown.parent().find("input[name='#{fieldName}']").remove()
 
-      if !value?
-        field.remove()
+      field.remove() unless value?
 
       # Toggle active class for the tick mark
       el.addClass ACTIVE_CLASS
 
       # Toggle the dropdown label
       if @options.toggleLabel
-        @updateLabel(selectedObject, el, @)
+        @updateLabel(selectedObject, el, this)
       if value?
-        if !field.length and fieldName
+        if not field.length and fieldName
           @addInput(fieldName, value)
         else
           field
             .val value
             .trigger 'change'
 
-      return selectedObject
+      selectedObject
 
   addInput: (fieldName, value)->
     # Create hidden input for form
@@ -556,7 +530,7 @@ class GitLabDropdown
     # Dropdown list item link selector, excluding non-selectable list items
     selector = "#{SELECTABLE_CLASSES}:eq(#{index}) a"
 
-    if @dropdown.find(".dropdown-toggle-page").length
+    if @dropdown.find('.dropdown-toggle-page').length
       selector = ".dropdown-page-one #{selector}"
 
     # simulate a click on the first link
@@ -570,11 +544,11 @@ class GitLabDropdown
 
   addArrowKeyEvent: ->
     ARROW_KEY_CODES = [38, 40]
-    $input = @dropdown.find(".dropdown-input-field")
+    $input = @dropdown.find '.dropdown-input-field'
 
     # Dropdown list item selector, excluding non-selectable list items
     selector = SELECTABLE_CLASSES
-    if @dropdown.find(".dropdown-toggle-page").length
+    if @dropdown.find('.dropdown-toggle-page').length
       selector = ".dropdown-page-one #{selector}"
 
     $('body').on 'keydown', (e) =>
@@ -597,12 +571,13 @@ class GitLabDropdown
           # Move up
           currentIndex -= 1 if currentIndex > 0
 
-        @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
+        if currentIndex isnt PREV_INDEX
+          @highlightRowAtIndex($listItems, currentIndex)
 
         return false
 
       # If enter is pressed and a row is highlighted, select it
-      if currentKeyCode is 13 and currentIndex != -1
+      if currentKeyCode is 13 and currentIndex isnt -1
         e.preventDefault()
         e.stopImmediatePropagation()
         @selectRowAtIndex e, currentIndex
@@ -621,7 +596,7 @@ class GitLabDropdown
 
     # Update the class for the row at the specific index
     $listItem = $listItems.eq(index)
-    $listItem.find('a:first-child').addClass "is-focused"
+    $listItem.find('a:first-child').addClass 'is-focused'
 
     # Dropdown content scroll area
     $dropdownContent = $listItem.closest('.dropdown-content')
@@ -640,7 +615,7 @@ class GitLabDropdown
       $dropdownContent.scrollTop(0)
     else if index is $listItems.length - 1
       # If this is the last item in the list, scroll to the bottom
-      $dropdownContent.scrollTop($dropdownContent[0].scrollHeight)
+      $dropdownContent.scrollTop $dropdownContent.prop 'scrollHeight'
     else if listItemBottom > dropdownContentBottom + dropdownScrollTop
       # Scroll the dropdown content down with a little padding
       $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING)
@@ -649,9 +624,9 @@ class GitLabDropdown
       $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING)
 
   updateLabel: (selected = null, el = null, instance = null) =>
-    $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selected, el, instance)
+    $(@el).find('.dropdown-toggle-text').text @options.toggleLabel(selected, el, instance)
 
 $.fn.glDropdown = (opts) ->
-  return @.each ->
-    if (!$.data @, 'glDropdown')
-      $.data(@, 'glDropdown', new GitLabDropdown @, opts)
+  @each ->
+    unless $.data this, 'glDropdown'
+      $.data this, 'glDropdown', new GitLabDropdown this, opts
-- 
cgit v1.2.1


From 1ac5f764cecdeaa4b41a77353a979f941cf0e72b Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Fri, 8 Jul 2016 02:00:45 +0100
Subject: Fixed test turbolink condition

---
 app/assets/javascripts/gl_dropdown.js.coffee | 10 +++++-----
 spec/javascripts/gl_dropdown_spec.js.coffee  |  7 ++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 4e439e0de84..5e626b148f3 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -307,7 +307,7 @@ class GitLabDropdown
 
   shouldPropagate: (e) =>
     $target = $(e.target) if @options.multiSelect
-    unless $target.hasClass('dropdown-menu-close') and $target.hasClass('dropdown-menu-close-icon') and $target.data('is-link')
+    if $target and not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
       e.stopPropagation()
       false
     else
@@ -380,10 +380,10 @@ class GitLabDropdown
     html = ''
 
     # Divider
-    return '<li class='divider'></li>' if data is 'divider'
+    return '<li class="divider"></li>' if data is 'divider'
 
     # Separator is a full-width divider
-    return '<li class='separator'></li>' if data is 'separator'
+    return '<li class="separator"></li>' if data is 'separator'
 
     # Header
     return _.template('<li class="dropdown-header"><%- header %></li>')({ header: data.header }) if data.header?
@@ -518,8 +518,8 @@ class GitLabDropdown
   addInput: (fieldName, value)->
     # Create hidden input for form
     $input = $('<input>').attr('type', 'hidden')
-                         .attr('name', fieldName)
-                        .val(value)
+      .attr('name', fieldName)
+      .val(value)
 
     if @options.inputId?
       $input.attr('id', @options.inputId)
diff --git a/spec/javascripts/gl_dropdown_spec.js.coffee b/spec/javascripts/gl_dropdown_spec.js.coffee
index 46a0af32a7d..a4b3f519745 100644
--- a/spec/javascripts/gl_dropdown_spec.js.coffee
+++ b/spec/javascripts/gl_dropdown_spec.js.coffee
@@ -81,11 +81,12 @@ describe 'Dropdown', ->
       navigateWithKeys 'down', randomIndex, =>
         spyOn(Turbolinks, 'visit').and.stub()
         navigateWithKeys 'enter', null, =>
+          expect(@dropdownContainerElement).not.toHaveClass 'open'
           link = $("#{ITEM_SELECTOR}:eq(#{randomIndex}) a", @dropdownMenuElement)
           expect(link).toHaveClass 'is-active'
-          if link.attr 'href'
-            expect(Turbolinks.visit).toHaveBeenCalledWith link.attr 'href'
-            expect(@dropdownContainerElement).not.toHaveClass 'open'
+          linkedLocation = link.attr 'href'
+          if linkedLocation and linkedLocation isnt '#'
+            expect(Turbolinks.visit).toHaveBeenCalledWith linkedLocation
 
     it 'should close on ESC keypress', ->
       expect(@dropdownContainerElement).toHaveClass 'open'
-- 
cgit v1.2.1


From affdf201d2acb7ae582df89ee6013f5563925877 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Tue, 19 Jul 2016 13:15:14 +0100
Subject: Further review changes and removed large ammounts of reformatting

---
 app/assets/javascripts/gl_dropdown.js.coffee       | 234 ++++++++++++---------
 .../javascripts/search_autocomplete.js.coffee      |   5 +-
 2 files changed, 132 insertions(+), 107 deletions(-)

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 5e626b148f3..51f739ae201 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -1,7 +1,7 @@
 class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
   ARROW_KEY_CODES = [38, 40]
-  HAS_VALUE_CLASS = 'has-value'
+  HAS_VALUE_CLASS = "has-value"
 
   constructor: (@input, @options) ->
     {
@@ -9,7 +9,7 @@ class GitLabDropdownFilter
     } = @options
 
     $inputContainer = @input.parent()
-    $clearButton = $inputContainer.find '.js-dropdown-input-clear'
+    $clearButton = $inputContainer.find('.js-dropdown-input-clear')
 
     @indeterminateIds = []
 
@@ -18,23 +18,24 @@ class GitLabDropdownFilter
       e.preventDefault()
       e.stopPropagation()
       @input
-        .val ''
-        .trigger 'keyup'
+        .val('')
+        .trigger('keyup')
         .focus()
 
     # Key events
-    timeout = ''
-    @input.on 'keyup', (e) =>
+    timeout = ""
+    @input.on "keyup", (e) =>
       keyCode = e.which
 
       return if ARROW_KEY_CODES.indexOf(keyCode) >= 0
 
-      if @input.val() isnt '' and not $inputContainer.hasClass HAS_VALUE_CLASS
+      if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.addClass HAS_VALUE_CLASS
-      else if @input.val() is '' and $inputContainer.hasClass HAS_VALUE_CLASS
+      else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.removeClass HAS_VALUE_CLASS
 
-      return false if keyCode is 13
+      if keyCode is 13
+        return false
 
       # Only filter asynchronously only if option remote is set
       if @options.remote
@@ -46,13 +47,13 @@ class GitLabDropdownFilter
             @input.blur()
 
           @options.query @input.val(), (data) =>
-            @options.callback data
+            @options.callback(data)
         , 250
       else
         @filter @input.val()
 
   shouldBlur: (keyCode) ->
-    BLUR_KEYCODES.indexOf(keyCode) >= 0
+    return BLUR_KEYCODES.indexOf(keyCode) >= 0
 
   filter: (search_text) ->
     @options.onFilter(search_text) if @options.onFilter
@@ -68,8 +69,9 @@ class GitLabDropdownFilter
         #   { prop: 'baz' }
         # ]
         if _.isArray(data)
-          results = fuzzaldrinPlus.filter data, search_text,
+          results = fuzzaldrinPlus.filter(data, search_text,
             key: @options.keys
+          )
         else
           # If data is grouped therefore an [object Object]. e.g.
           # {
@@ -85,8 +87,9 @@ class GitLabDropdownFilter
           if gl.utils.isObject data
             results = {}
             for key, group of data
-              tmp = fuzzaldrinPlus.filter group, search_text,
+              tmp = fuzzaldrinPlus.filter(group, search_text,
                 key: @options.keys
+              )
 
               if tmp.length
                 results[key] = tmp.map (item) -> item
@@ -97,10 +100,10 @@ class GitLabDropdownFilter
 
       if search_text
         elements.each ->
-          $el = $(this)
-          matches = fuzzaldrinPlus.match $el.text().trim(), search_text
+          $el = $(@)
+          matches = fuzzaldrinPlus.match($el.text().trim(), search_text)
 
-          unless $el.is '.dropdown-header'
+          unless $el.is('.dropdown-header')
             if matches.length
               $el.show()
             else
@@ -112,68 +115,75 @@ class GitLabDropdownRemote
   constructor: (@dataEndpoint, @options) ->
 
   execute: ->
-    if typeof @dataEndpoint is 'string'
+    if typeof @dataEndpoint is "string"
       @fetchData()
-    else if typeof @dataEndpoint is 'function'
-      @options.beforeSend() if @options.beforeSend
+    else if typeof @dataEndpoint is "function"
+      if @options.beforeSend
+        @options.beforeSend()
 
       # Fetch the data by calling the data funcfion
-      @dataEndpoint '', (data) =>
-        @options.success(data) if @options.success
-        @options.beforeSend() if @options.beforeSend
+      @dataEndpoint "", (data) =>
+        if @options.success
+          @options.success(data)
+        if @options.beforeSend
+          @options.beforeSend()
 
   # Fetch the data through ajax if the data is a string
   fetchData: ->
-    $.ajax
+    $.ajax(
       url: @dataEndpoint,
       dataType: @options.dataType,
       beforeSend: =>
-        @options.beforeSend() if @options.beforeSend
+        if @options.beforeSend
+          @options.beforeSend()
       success: (data) =>
-        @options.success(data) if @options.success
+        if @options.success
+          @options.success(data)
+    )
 
 class GitLabDropdown
-  LOADING_CLASS = 'is-loading'
-  PAGE_TWO_CLASS = 'is-page-two'
-  ACTIVE_CLASS = 'is-active'
-  INDETERMINATE_CLASS = 'is-indeterminate'
+  LOADING_CLASS = "is-loading"
+  PAGE_TWO_CLASS = "is-page-two"
+  ACTIVE_CLASS = "is-active"
+  INDETERMINATE_CLASS = "is-indeterminate"
+  currentIndex = -1
   NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
   SELECTABLE_CLASSES = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
   FILTER_INPUT = '.dropdown-input .dropdown-input-field'
-  currentIndex = -1
   CURSOR_SELECT_SCROLL_PADDING = 5
 
   constructor: (@el, @options) ->
-    self = this
-    selector = $(@el).data 'target'
+    self = @
+    selector = $(@el).data "target"
     @dropdown = if selector? then $(selector) else $(@el).parent()
 
     # Set Defaults
     {
       # If no input is passed create a default one
-      @filterInput = @getElement FILTER_INPUT
+      @filterInput = @getElement(FILTER_INPUT)
       @highlight = false
       @filterInputBlur = true
     } = @options
 
-    self = this
+    self = @
 
     # If selector was passed
-    @filterInput = @getElement(@filterInput) if _.isString @filterInput
+    if _.isString(@filterInput)
+      @filterInput = @getElement(@filterInput)
 
     searchFields = if @options.search then @options.search.fields else []
 
     if @options.data
       # If we provided data
       # data could be an array of objects or a group of arrays
-      if _.isObject(@options.data) and not _.isFunction @options.data
+      if _.isObject(@options.data) and not _.isFunction(@options.data)
         @fullData = @options.data
         @parseData @options.data
       else
         # Remote data
-        @remote = new GitLabDropdownRemote @options.data,
+        @remote = new GitLabDropdownRemote @options.data, {
           dataType: @options.dataType,
-          beforeSend: @toggleLoading.bind this
+          beforeSend: @toggleLoading.bind(@)
           success: (data) =>
             @fullData = data
 
@@ -181,8 +191,8 @@ class GitLabDropdown
             currentIndex = -1
             @parseData @fullData
 
-            if @options.filterable and @filter and @filter.input
-              @filter.input.trigger 'keyup'
+            @filter.input.trigger('keyup') if @options.filterable and @filter and @filter.input
+        }
 
     # Init filterable
     if @options.filterable
@@ -199,9 +209,9 @@ class GitLabDropdown
           if @dropdown.find('.dropdown-toggle-page').length
             selector = ".dropdown-page-one #{selector}"
 
-          $(selector)
+          return $(selector)
         data: =>
-          @fullData
+          return @fullData
         callback: (data) =>
           @parseData data
 
@@ -221,35 +231,37 @@ class GitLabDropdown
 
     # Event listeners
 
-    @dropdown.on 'shown.bs.dropdown', @opened
-    @dropdown.on 'hidden.bs.dropdown', @hidden
-    $(@el).on 'update.label', @updateLabel
-    @dropdown.on 'click', '.dropdown-menu, .dropdown-menu-close', @shouldPropagate
+    @dropdown.on "shown.bs.dropdown", @opened
+    @dropdown.on "hidden.bs.dropdown", @hidden
+    $(@el).on "update.label", @updateLabel
+    @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
     @dropdown.on 'keyup', (e) =>
-      $('.dropdown-menu-close', @dropdown).trigger 'click' if e.which is 27
+      if e.which is 27 # Escape key
+        $('.dropdown-menu-close', @dropdown).trigger 'click'
 
     @dropdown.on 'blur', 'a', (e) =>
       if e.relatedTarget?
         $relatedTarget = $(e.relatedTarget)
         $dropdownMenu = $relatedTarget.closest('.dropdown-menu')
 
-        @dropdown.removeClass('open') if $dropdownMenu.length is 0
+        if $dropdownMenu.length is 0
+          @dropdown.removeClass('open')
 
-    if @dropdown.find('.dropdown-toggle-page').length
-      @dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on 'click', (e) =>
+    if @dropdown.find(".dropdown-toggle-page").length
+      @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
         e.preventDefault()
         e.stopPropagation()
 
         @togglePage()
 
     if @options.selectable
-      selector = '.dropdown-content a'
+      selector = ".dropdown-content a"
 
-      if @dropdown.find('.dropdown-toggle-page').length
-        selector = '.dropdown-page-one .dropdown-content a'
+      if @dropdown.find(".dropdown-toggle-page").length
+        selector = ".dropdown-page-one .dropdown-content a"
 
-      @dropdown.on 'click', selector, (e) ->
-        $el = $(this)
+      @dropdown.on "click", selector, (e) ->
+        $el = $(@)
         selected = self.rowClicked $el
 
         if self.options.clicked
@@ -268,7 +280,8 @@ class GitLabDropdown
     menu = $('.dropdown-menu', @dropdown)
 
     if menu.hasClass(PAGE_TWO_CLASS)
-      @remote.execute() if @remote
+      if @remote
+        @remote.execute()
 
     menu.toggleClass PAGE_TWO_CLASS
 
@@ -303,32 +316,38 @@ class GitLabDropdown
 
   renderData: (data, group = false) ->
     data.map (obj, index) =>
-      @renderItem(obj, group, index)
+      return @renderItem(obj, group, index)
 
   shouldPropagate: (e) =>
-    $target = $(e.target) if @options.multiSelect
+    if @options.multiSelect
+      $target = $(e.target)
+
     if $target and not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
       e.stopPropagation()
-      false
+      return false
     else
-      true
+      return true
 
   opened: =>
     @resetRows()
     @addArrowKeyEvent()
 
-    @options.setIndeterminateIds.call this if @options.setIndeterminateIds
+    if @options.setIndeterminateIds
+      @options.setIndeterminateIds.call(@)
 
-    @options.setActiveIds.call this if @options.setActiveIds
+    if @options.setActiveIds
+      @options.setActiveIds.call(@)
 
     # Makes indeterminate items effective
     if @fullData and @dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')
       @parseData @fullData
 
     contentHtml = $('.dropdown-content', @dropdown).html()
-    @remote.execute() if @remote and contentHtml is ''
+    if @remote && contentHtml is ""
+      @remote.execute()
 
-    @filterInput.focus() if @options.filterable
+    if @options.filterable
+      @filterInput.focus()
 
     @dropdown.trigger('shown.gl.dropdown')
 
@@ -336,48 +355,51 @@ class GitLabDropdown
     @resetRows()
     @removeArrayKeyEvent()
 
-    $input = @dropdown.find('.dropdown-input-field')
+    $input = @dropdown.find(".dropdown-input-field")
 
     if @options.filterable
       $input
         .blur()
-        .val('')
+        .val("")
 
     # Triggering 'keyup' will re-render the dropdown which is not always required
     # specially if we want to keep the state of the dropdown needed for bulk-assignment
-    $input.trigger('keyup') unless @options.persistWhenHide
+    if not @options.persistWhenHide
+      $input.trigger("keyup")
 
-    if @dropdown.find('.dropdown-toggle-page').length
+    if @dropdown.find(".dropdown-toggle-page").length
       $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
 
-    @options.hidden.call this, e if @options.hidden
+    if @options.hidden
+      @options.hidden.call(@,e)
 
     @dropdown.trigger('hidden.gl.dropdown')
 
 
   # Render the full menu
   renderMenu: (html) ->
-    menu_html = ''
+    menu_html = ""
 
     if @options.renderMenu
-      menu_html = @options.renderMenu html
+      menu_html = @options.renderMenu(html)
     else
-      menu_html = $('<ul/>').append html
+      menu_html = $('<ul />')
+        .append(html)
 
-    menu_html
+    return menu_html
 
   # Append the menu into the dropdown
   appendMenu: (html) ->
     selector = '.dropdown-content'
-    if @dropdown.find('.dropdown-toggle-page').length
-      selector = '.dropdown-page-one .dropdown-content'
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one .dropdown-content"
     $(selector, @dropdown)
       .empty()
-      .append html
+      .append(html)
 
   # Render the row
   renderItem: (data, group = false, index = false) ->
-    html = ''
+    html = ""
 
     # Divider
     return '<li class="divider"></li>' if data is 'divider'
@@ -392,11 +414,12 @@ class GitLabDropdown
       # Call the render function
       html = @options.renderRow.call(@options, data, @)
     else
-      unless selected
+      if not selected
         value = if @options.id then @options.id(data) else data.id
         fieldName = @options.fieldName
         field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
-        selected = true if field.length
+        if field.length
+          selected = true
 
       # Set URL
       if @options.url?
@@ -410,15 +433,16 @@ class GitLabDropdown
       else
         text = if data.text? then data.text else ''
 
-      cssClass = ''
+      cssClass = ""
 
-      cssClass = 'is-active' if selected
+      if selected
+        cssClass = "is-active"
 
       if @highlight
         text = @highlightTextMatches(text, @filterInput.val())
 
       if group
-        groupAttrs = "data-group=#{group} data-index=#{index}"
+        groupAttrs = "data-group='#{group}' data-index='#{index}'"
       else
         groupAttrs = ''
       html = _.template('<li>
@@ -432,7 +456,7 @@ class GitLabDropdown
         text: text
       })
 
-    html
+    return html
 
   highlightTextMatches: (text, term) ->
     occurrences = fuzzaldrinPlus.match(text, term)
@@ -452,9 +476,9 @@ class GitLabDropdown
     isInput = $(@el).is('input')
 
     if @renderedData
-      groupName = el.data 'group'
+      groupName = el.data('group')
       if groupName
-        selectedIndex = el.data 'index'
+        selectedIndex = el.data('index')
         selectedObject = @renderedData[groupName][selectedIndex]
       else
         selectedIndex = el.closest('li').index()
@@ -477,19 +501,20 @@ class GitLabDropdown
 
       # Toggle the dropdown label
       if @options.toggleLabel
-        @updateLabel(selectedObject, el, this)
+        @updateLabel(selectedObject, el, @)
       else
         selectedObject
     else if el.hasClass(INDETERMINATE_CLASS)
       el.addClass ACTIVE_CLASS
       el.removeClass INDETERMINATE_CLASS
 
-      field.remove() unless value?
+      if not value?
+        field.remove()
 
       if not field.length and fieldName
         @addInput(fieldName, value)
 
-      selectedObject
+      return selectedObject
     else
       if not @options.multiSelect or el.hasClass('dropdown-clear-active')
         @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
@@ -497,29 +522,30 @@ class GitLabDropdown
         unless isInput
           @dropdown.parent().find("input[name='#{fieldName}']").remove()
 
-      field.remove() unless value?
+      if !value?
+        field.remove()
 
       # Toggle active class for the tick mark
       el.addClass ACTIVE_CLASS
 
       # Toggle the dropdown label
       if @options.toggleLabel
-        @updateLabel(selectedObject, el, this)
+        @updateLabel(selectedObject, el, @)
       if value?
-        if not field.length and fieldName
+        if !field.length and fieldName
           @addInput(fieldName, value)
         else
           field
             .val value
             .trigger 'change'
 
-      selectedObject
+      return selectedObject
 
   addInput: (fieldName, value)->
     # Create hidden input for form
     $input = $('<input>').attr('type', 'hidden')
-      .attr('name', fieldName)
-      .val(value)
+                         .attr('name', fieldName)
+                        .val(value)
 
     if @options.inputId?
       $input.attr('id', @options.inputId)
@@ -530,21 +556,22 @@ class GitLabDropdown
     # Dropdown list item link selector, excluding non-selectable list items
     selector = "#{SELECTABLE_CLASSES}:eq(#{index}) a"
 
-    if @dropdown.find('.dropdown-toggle-page').length
+    if @dropdown.find(".dropdown-toggle-page").length
       selector = ".dropdown-page-one #{selector}"
 
     # simulate a click on the first link
     $el = $(selector, @dropdown)
+
     if $el.length
       e.preventDefault()
       e.stopImmediatePropagation()
-      $el.first().trigger 'click'
+      $el.first().trigger('click')
       href = $el.attr 'href'
       Turbolinks.visit(href) if href and href isnt '#'
 
   addArrowKeyEvent: ->
     ARROW_KEY_CODES = [38, 40]
-    $input = @dropdown.find '.dropdown-input-field'
+    $input = @dropdown.find(".dropdown-input-field")
 
     # Dropdown list item selector, excluding non-selectable list items
     selector = SELECTABLE_CLASSES
@@ -571,8 +598,7 @@ class GitLabDropdown
           # Move up
           currentIndex -= 1 if currentIndex > 0
 
-        if currentIndex isnt PREV_INDEX
-          @highlightRowAtIndex($listItems, currentIndex)
+        @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
 
         return false
 
@@ -596,7 +622,7 @@ class GitLabDropdown
 
     # Update the class for the row at the specific index
     $listItem = $listItems.eq(index)
-    $listItem.find('a:first-child').addClass 'is-focused'
+    $listItem.find('a:first-child').addClass "is-focused"
 
     # Dropdown content scroll area
     $dropdownContent = $listItem.closest('.dropdown-content')
@@ -624,9 +650,9 @@ class GitLabDropdown
       $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING)
 
   updateLabel: (selected = null, el = null, instance = null) =>
-    $(@el).find('.dropdown-toggle-text').text @options.toggleLabel(selected, el, instance)
+    $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selected, el, instance)
 
 $.fn.glDropdown = (opts) ->
-  @each ->
-    unless $.data this, 'glDropdown'
-      $.data this, 'glDropdown', new GitLabDropdown this, opts
+  return @.each ->
+    if (!$.data @, 'glDropdown')
+      $.data(@, 'glDropdown', new GitLabDropdown @, opts)
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index a3baea1ae01..fc74959b1e1 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -315,11 +315,10 @@ class @SearchAutocomplete
 
   disableAutocomplete: ->
     # If not disabled already, disable
-    if not @searchInput.hasClass('disabled') && @dropdown.hasClass('open')
+    if not @searchInput.hasClass('disabled') and @dropdown.hasClass 'open'
       @searchInput.addClass('disabled')
       # Close dropdown and invoke its hidden() method
-      @dropdown.removeClass('open')
-        .trigger('hidden.bs.dropdown')
+      @dropdown.removeClass('open').trigger 'hidden.bs.dropdown'
       @restoreMenu()
 
   restoreMenu: ->
-- 
cgit v1.2.1


From e74d12a9b3e76c6d49ff1c57bd6471073d34be4a Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <jared@Jareds-MacBook-Pro.local>
Date: Fri, 22 Jul 2016 16:17:43 +0100
Subject: Fix failed tests

---
 app/assets/javascripts/gl_dropdown.js.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 51f739ae201..e0dae228f7a 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -442,7 +442,7 @@ class GitLabDropdown
         text = @highlightTextMatches(text, @filterInput.val())
 
       if group
-        groupAttrs = "data-group='#{group}' data-index='#{index}'"
+        groupAttrs = "data-group=#{group} data-index=#{index}"
       else
         groupAttrs = ''
       html = _.template('<li>
-- 
cgit v1.2.1


From dcf09a532b7eff230bf2a646fdb96e9aa43ff189 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Wed, 27 Jul 2016 01:17:07 +0100
Subject: Moved changes across to es5 and changed spec to es6

---
 app/assets/javascripts/gl_dropdown.js              |  65 +-
 app/assets/javascripts/gl_dropdown.js.coffee       | 658 ---------------------
 app/assets/javascripts/search_autocomplete.js      |  18 +-
 .../javascripts/search_autocomplete.js.coffee      | 348 -----------
 spec/javascripts/gl_dropdown_spec.js.coffee        |  97 ---
 spec/javascripts/gl_dropdown_spec.js.es6           | 120 ++++
 6 files changed, 175 insertions(+), 1131 deletions(-)
 delete mode 100644 app/assets/javascripts/gl_dropdown.js.coffee
 delete mode 100644 app/assets/javascripts/search_autocomplete.js.coffee
 delete mode 100644 spec/javascripts/gl_dropdown_spec.js.coffee
 create mode 100644 spec/javascripts/gl_dropdown_spec.js.es6

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index d3394fae3f9..aacc49be1ac 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -191,6 +191,12 @@
 
     currentIndex = -1;
 
+    NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+
+  	SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ")";
+
+    CURSOR_SELECT_SCROLL_PADDING = 5
+
     FILTER_INPUT = '.dropdown-input .dropdown-input-field';
 
     function GitLabDropdown(el1, options) {
@@ -213,6 +219,7 @@
       if (this.options.data) {
         if (_.isObject(this.options.data) && !_.isFunction(this.options.data)) {
           this.fullData = this.options.data;
+  	      currentIndex = -1
           this.parseData(this.options.data);
         } else {
           this.remote = new GitLabDropdownRemote(this.options.data, {
@@ -240,7 +247,7 @@
           keys: searchFields,
           elements: (function(_this) {
             return function() {
-              selector = '.dropdown-content li:not(.divider)';
+              selector = SELECTABLE_CLASSES;
               if (_this.dropdown.find('.dropdown-toggle-page').length) {
                 selector = ".dropdown-page-one " + selector;
               }
@@ -376,7 +383,7 @@
       var $target;
       if (this.options.multiSelect) {
         $target = $(e.target);
-        if (!$target.hasClass('dropdown-menu-close') && !$target.hasClass('dropdown-menu-close-icon') && !$target.data('is-link')) {
+        if ($target && !$target.hasClass('dropdown-menu-close') && !$target.hasClass('dropdown-menu-close-icon') && !$target.data('is-link')) {
           e.stopPropagation();
           return false;
         } else {
@@ -387,7 +394,7 @@
 
     GitLabDropdown.prototype.opened = function() {
       var contentHtml;
-      currentIndex = -1;
+      this.resetRows();
       this.addArrowKeyEvent();
       if (this.options.setIndeterminateIds) {
         this.options.setIndeterminateIds.call(this);
@@ -410,6 +417,7 @@
 
     GitLabDropdown.prototype.hidden = function(e) {
       var $input;
+      this.resetRows();
       this.removeArrayKeyEvent();
       $input = this.dropdown.find(".dropdown-input-field");
       if (this.options.filterable) {
@@ -463,7 +471,7 @@
         return "<li class='separator'></li>";
       }
       if (data.header != null) {
-        return "<li class='dropdown-header'>" + data.header + "</li>";
+        return _.template('<li class="dropdown-header"><%- header %></li>')({ header: data.header });
       }
       if (this.options.renderRow) {
         html = this.options.renderRow.call(this.options, data, this);
@@ -498,7 +506,12 @@
         } else {
           groupAttrs = '';
         }
-        html = "<li> <a href='" + url + "' " + groupAttrs + " class='" + cssClass + "'> " + text + " </a> </li>";
+        html = _.template('<li><a href="<%- url %>" <%- groupAttrs %> class="<%- cssClass %>"><%= text %></a></li>')({
+          url: url,
+          groupAttrs: groupAttrs,
+          cssClass: cssClass,
+          text: text
+        });
       }
       return html;
     };
@@ -520,17 +533,6 @@
       return html = "<li class='dropdown-menu-empty-link'> <a href='#' class='is-focused'> No matching results. </a> </li>";
     };
 
-    GitLabDropdown.prototype.highlightRow = function(index) {
-      var selector;
-      if (this.filterInput.val() !== "") {
-        selector = '.dropdown-content li:first-child a';
-        if (this.dropdown.find(".dropdown-toggle-page").length) {
-          selector = ".dropdown-page-one .dropdown-content li:first-child a";
-        }
-        return this.getElement(selector).addClass('is-focused');
-      }
-    };
-
     GitLabDropdown.prototype.rowClicked = function(el) {
       var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value;
       fieldName = this.options.fieldName;
@@ -609,13 +611,17 @@
 
     GitLabDropdown.prototype.selectRowAtIndex = function(index) {
       var $el, selector;
-      selector = ".dropdown-content li:not(.divider,.dropdown-header,.separator):eq(" + index + ") a";
+      selector = SELECTABLE_CLASSES + ":eq(" + index + ") a";
       if (this.dropdown.find(".dropdown-toggle-page").length) {
         selector = ".dropdown-page-one " + selector;
       }
       $el = $(selector, this.dropdown);
       if ($el.length) {
-        return $el.first().trigger('click');
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        $el.first().trigger('click');
+        href = $el.attr('href');
+  	    if (href && href !== '#') Turbolinks.visit(href);
       }
     };
 
@@ -623,7 +629,7 @@
       var $input, ARROW_KEY_CODES, selector;
       ARROW_KEY_CODES = [38, 40];
       $input = this.dropdown.find(".dropdown-input-field");
-      selector = '.dropdown-content li:not(.divider,.dropdown-header,.separator):visible';
+      selector = SELECTABLE_CLASSES;
       if (this.dropdown.find(".dropdown-toggle-page").length) {
         selector = ".dropdown-page-one " + selector;
       }
@@ -651,7 +657,9 @@
             return false;
           }
           if (currentKeyCode === 13 && currentIndex !== -1) {
-            return _this.selectRowAtIndex($('.is-focused', _this.dropdown).closest('li').index() - 1);
+            e.preventDefault()
+  	        e.stopImmediatePropagation()
+            return _this.selectRowAtIndex(currentIndex);
           }
         };
       })(this));
@@ -661,6 +669,11 @@
       return $('body').off('keydown');
     };
 
+    GitLabDropdown.prototype.resetRows = function resetRows() {
+	    currentIndex = -1;
+	    $('.is-focused', this.dropdown).removeClass('is-focused');
+    };
+
     GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
       var $dropdownContent, $listItem, dropdownContentBottom, dropdownContentHeight, dropdownContentTop, dropdownScrollTop, listItemBottom, listItemHeight, listItemTop;
       $('.is-focused', this.dropdown).removeClass('is-focused');
@@ -674,10 +687,14 @@
       listItemHeight = $listItem.outerHeight();
       listItemTop = $listItem.prop('offsetTop');
       listItemBottom = listItemTop + listItemHeight;
-      if (listItemBottom > dropdownContentBottom + dropdownScrollTop) {
-        return $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom);
-      } else if (listItemTop < dropdownContentTop + dropdownScrollTop) {
-        return $dropdownContent.scrollTop(listItemTop - dropdownContentTop);
+      if (!index) {
+        $dropdownContent.scrollTop(0)
+	    } else if (index === ($listItems.length - 1)) {
+  	    $dropdownContent.scrollTop $dropdownContent.prop('scrollHeight');
+      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop))
+        $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
+      } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
+        return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
       }
     };
 
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
deleted file mode 100644
index e0dae228f7a..00000000000
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ /dev/null
@@ -1,658 +0,0 @@
-class GitLabDropdownFilter
-  BLUR_KEYCODES = [27, 40]
-  ARROW_KEY_CODES = [38, 40]
-  HAS_VALUE_CLASS = "has-value"
-
-  constructor: (@input, @options) ->
-    {
-      @filterInputBlur = true
-    } = @options
-
-    $inputContainer = @input.parent()
-    $clearButton = $inputContainer.find('.js-dropdown-input-clear')
-
-    @indeterminateIds = []
-
-    # Clear click
-    $clearButton.on 'click', (e) =>
-      e.preventDefault()
-      e.stopPropagation()
-      @input
-        .val('')
-        .trigger('keyup')
-        .focus()
-
-    # Key events
-    timeout = ""
-    @input.on "keyup", (e) =>
-      keyCode = e.which
-
-      return if ARROW_KEY_CODES.indexOf(keyCode) >= 0
-
-      if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
-        $inputContainer.addClass HAS_VALUE_CLASS
-      else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
-        $inputContainer.removeClass HAS_VALUE_CLASS
-
-      if keyCode is 13
-        return false
-
-      # Only filter asynchronously only if option remote is set
-      if @options.remote
-        clearTimeout timeout
-        timeout = setTimeout =>
-          blur_field = @shouldBlur keyCode
-
-          if blur_field and @filterInputBlur
-            @input.blur()
-
-          @options.query @input.val(), (data) =>
-            @options.callback(data)
-        , 250
-      else
-        @filter @input.val()
-
-  shouldBlur: (keyCode) ->
-    return BLUR_KEYCODES.indexOf(keyCode) >= 0
-
-  filter: (search_text) ->
-    @options.onFilter(search_text) if @options.onFilter
-    data = @options.data()
-
-    if data? and not @options.filterByText
-      results = data
-
-      if search_text isnt ''
-        # When data is an array of objects therefore [object Array] e.g.
-        # [
-        #   { prop: 'foo' },
-        #   { prop: 'baz' }
-        # ]
-        if _.isArray(data)
-          results = fuzzaldrinPlus.filter(data, search_text,
-            key: @options.keys
-          )
-        else
-          # If data is grouped therefore an [object Object]. e.g.
-          # {
-          #   groupName1: [
-          #     { prop: 'foo' },
-          #     { prop: 'baz' }
-          #   ],
-          #   groupName2: [
-          #     { prop: 'abc' },
-          #     { prop: 'def' }
-          #   ]
-          # }
-          if gl.utils.isObject data
-            results = {}
-            for key, group of data
-              tmp = fuzzaldrinPlus.filter(group, search_text,
-                key: @options.keys
-              )
-
-              if tmp.length
-                results[key] = tmp.map (item) -> item
-
-      @options.callback results
-    else
-      elements = @options.elements()
-
-      if search_text
-        elements.each ->
-          $el = $(@)
-          matches = fuzzaldrinPlus.match($el.text().trim(), search_text)
-
-          unless $el.is('.dropdown-header')
-            if matches.length
-              $el.show()
-            else
-              $el.hide()
-      else
-        elements.show()
-
-class GitLabDropdownRemote
-  constructor: (@dataEndpoint, @options) ->
-
-  execute: ->
-    if typeof @dataEndpoint is "string"
-      @fetchData()
-    else if typeof @dataEndpoint is "function"
-      if @options.beforeSend
-        @options.beforeSend()
-
-      # Fetch the data by calling the data funcfion
-      @dataEndpoint "", (data) =>
-        if @options.success
-          @options.success(data)
-        if @options.beforeSend
-          @options.beforeSend()
-
-  # Fetch the data through ajax if the data is a string
-  fetchData: ->
-    $.ajax(
-      url: @dataEndpoint,
-      dataType: @options.dataType,
-      beforeSend: =>
-        if @options.beforeSend
-          @options.beforeSend()
-      success: (data) =>
-        if @options.success
-          @options.success(data)
-    )
-
-class GitLabDropdown
-  LOADING_CLASS = "is-loading"
-  PAGE_TWO_CLASS = "is-page-two"
-  ACTIVE_CLASS = "is-active"
-  INDETERMINATE_CLASS = "is-indeterminate"
-  currentIndex = -1
-  NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
-  SELECTABLE_CLASSES = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
-  FILTER_INPUT = '.dropdown-input .dropdown-input-field'
-  CURSOR_SELECT_SCROLL_PADDING = 5
-
-  constructor: (@el, @options) ->
-    self = @
-    selector = $(@el).data "target"
-    @dropdown = if selector? then $(selector) else $(@el).parent()
-
-    # Set Defaults
-    {
-      # If no input is passed create a default one
-      @filterInput = @getElement(FILTER_INPUT)
-      @highlight = false
-      @filterInputBlur = true
-    } = @options
-
-    self = @
-
-    # If selector was passed
-    if _.isString(@filterInput)
-      @filterInput = @getElement(@filterInput)
-
-    searchFields = if @options.search then @options.search.fields else []
-
-    if @options.data
-      # If we provided data
-      # data could be an array of objects or a group of arrays
-      if _.isObject(@options.data) and not _.isFunction(@options.data)
-        @fullData = @options.data
-        @parseData @options.data
-      else
-        # Remote data
-        @remote = new GitLabDropdownRemote @options.data, {
-          dataType: @options.dataType,
-          beforeSend: @toggleLoading.bind(@)
-          success: (data) =>
-            @fullData = data
-
-            # Reset selected row index on new data
-            currentIndex = -1
-            @parseData @fullData
-
-            @filter.input.trigger('keyup') if @options.filterable and @filter and @filter.input
-        }
-
-    # Init filterable
-    if @options.filterable
-      @filter = new GitLabDropdownFilter @filterInput,
-        filterInputBlur: @filterInputBlur
-        filterByText: @options.filterByText
-        onFilter: @options.onFilter
-        remote: @options.filterRemote
-        query: @options.data
-        keys: searchFields
-        elements: =>
-          selector = SELECTABLE_CLASSES
-
-          if @dropdown.find('.dropdown-toggle-page').length
-            selector = ".dropdown-page-one #{selector}"
-
-          return $(selector)
-        data: =>
-          return @fullData
-        callback: (data) =>
-          @parseData data
-
-          unless @filterInput.val() is ''
-            selector = '.dropdown-content li:not(.divider):visible'
-
-            if @dropdown.find('.dropdown-toggle-page').length
-              selector = ".dropdown-page-one #{selector}"
-
-            $(selector, @dropdown)
-              .first()
-              .find('a')
-              .addClass('is-focused')
-
-            currentIndex = 0
-
-
-    # Event listeners
-
-    @dropdown.on "shown.bs.dropdown", @opened
-    @dropdown.on "hidden.bs.dropdown", @hidden
-    $(@el).on "update.label", @updateLabel
-    @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
-    @dropdown.on 'keyup', (e) =>
-      if e.which is 27 # Escape key
-        $('.dropdown-menu-close', @dropdown).trigger 'click'
-
-    @dropdown.on 'blur', 'a', (e) =>
-      if e.relatedTarget?
-        $relatedTarget = $(e.relatedTarget)
-        $dropdownMenu = $relatedTarget.closest('.dropdown-menu')
-
-        if $dropdownMenu.length is 0
-          @dropdown.removeClass('open')
-
-    if @dropdown.find(".dropdown-toggle-page").length
-      @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
-        e.preventDefault()
-        e.stopPropagation()
-
-        @togglePage()
-
-    if @options.selectable
-      selector = ".dropdown-content a"
-
-      if @dropdown.find(".dropdown-toggle-page").length
-        selector = ".dropdown-page-one .dropdown-content a"
-
-      @dropdown.on "click", selector, (e) ->
-        $el = $(@)
-        selected = self.rowClicked $el
-
-        if self.options.clicked
-          self.options.clicked(selected, $el, e)
-
-        $el.trigger('blur')
-
-  # Finds an element inside wrapper element
-  getElement: (selector) ->
-    @dropdown.find selector
-
-  toggleLoading: ->
-    $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS
-
-  togglePage: ->
-    menu = $('.dropdown-menu', @dropdown)
-
-    if menu.hasClass(PAGE_TWO_CLASS)
-      if @remote
-        @remote.execute()
-
-    menu.toggleClass PAGE_TWO_CLASS
-
-    # Focus first visible input on active page
-    @dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus()
-
-  parseData: (data) ->
-    @renderedData = data
-
-    if @options.filterable and data.length is 0
-      # render no matching results
-      html = [@noResults()]
-    else
-      # Handle array groups
-      if gl.utils.isObject data
-        html = []
-        for name, groupData of data
-          # Add header for each group
-          html.push(@renderItem(header: name, name))
-
-          @renderData(groupData, name)
-            .map (item) ->
-              html.push item
-      else
-        # Render each row
-        html = @renderData(data)
-
-    # Render the full menu
-    full_html = @renderMenu(html)
-
-    @appendMenu(full_html)
-
-  renderData: (data, group = false) ->
-    data.map (obj, index) =>
-      return @renderItem(obj, group, index)
-
-  shouldPropagate: (e) =>
-    if @options.multiSelect
-      $target = $(e.target)
-
-    if $target and not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
-      e.stopPropagation()
-      return false
-    else
-      return true
-
-  opened: =>
-    @resetRows()
-    @addArrowKeyEvent()
-
-    if @options.setIndeterminateIds
-      @options.setIndeterminateIds.call(@)
-
-    if @options.setActiveIds
-      @options.setActiveIds.call(@)
-
-    # Makes indeterminate items effective
-    if @fullData and @dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')
-      @parseData @fullData
-
-    contentHtml = $('.dropdown-content', @dropdown).html()
-    if @remote && contentHtml is ""
-      @remote.execute()
-
-    if @options.filterable
-      @filterInput.focus()
-
-    @dropdown.trigger('shown.gl.dropdown')
-
-  hidden: (e) =>
-    @resetRows()
-    @removeArrayKeyEvent()
-
-    $input = @dropdown.find(".dropdown-input-field")
-
-    if @options.filterable
-      $input
-        .blur()
-        .val("")
-
-    # Triggering 'keyup' will re-render the dropdown which is not always required
-    # specially if we want to keep the state of the dropdown needed for bulk-assignment
-    if not @options.persistWhenHide
-      $input.trigger("keyup")
-
-    if @dropdown.find(".dropdown-toggle-page").length
-      $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
-
-    if @options.hidden
-      @options.hidden.call(@,e)
-
-    @dropdown.trigger('hidden.gl.dropdown')
-
-
-  # Render the full menu
-  renderMenu: (html) ->
-    menu_html = ""
-
-    if @options.renderMenu
-      menu_html = @options.renderMenu(html)
-    else
-      menu_html = $('<ul />')
-        .append(html)
-
-    return menu_html
-
-  # Append the menu into the dropdown
-  appendMenu: (html) ->
-    selector = '.dropdown-content'
-    if @dropdown.find(".dropdown-toggle-page").length
-      selector = ".dropdown-page-one .dropdown-content"
-    $(selector, @dropdown)
-      .empty()
-      .append(html)
-
-  # Render the row
-  renderItem: (data, group = false, index = false) ->
-    html = ""
-
-    # Divider
-    return '<li class="divider"></li>' if data is 'divider'
-
-    # Separator is a full-width divider
-    return '<li class="separator"></li>' if data is 'separator'
-
-    # Header
-    return _.template('<li class="dropdown-header"><%- header %></li>')({ header: data.header }) if data.header?
-
-    if @options.renderRow
-      # Call the render function
-      html = @options.renderRow.call(@options, data, @)
-    else
-      if not selected
-        value = if @options.id then @options.id(data) else data.id
-        fieldName = @options.fieldName
-        field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
-        if field.length
-          selected = true
-
-      # Set URL
-      if @options.url?
-        url = @options.url(data)
-      else
-        url = if data.url? then data.url else '#'
-
-      # Set Text
-      if @options.text?
-        text = @options.text(data)
-      else
-        text = if data.text? then data.text else ''
-
-      cssClass = ""
-
-      if selected
-        cssClass = "is-active"
-
-      if @highlight
-        text = @highlightTextMatches(text, @filterInput.val())
-
-      if group
-        groupAttrs = "data-group=#{group} data-index=#{index}"
-      else
-        groupAttrs = ''
-      html = _.template('<li>
-        <a href="<%- url %>" <%- groupAttrs %> class="<%- cssClass %>">
-          <%= text %>
-        </a>
-      </li>')({
-        url: url
-        groupAttrs: groupAttrs
-        cssClass: cssClass
-        text: text
-      })
-
-    return html
-
-  highlightTextMatches: (text, term) ->
-    occurrences = fuzzaldrinPlus.match(text, term)
-    text.split('').map((character, i) ->
-      if i in occurrences then "<b>#{character}</b>" else character
-    ).join('')
-
-  noResults: ->
-    html = '<li class="dropdown-menu-empty-link">
-      <a href="#" class="is-focused">
-        No matching results.
-      </a>
-    </li>'
-
-  rowClicked: (el) ->
-    fieldName = @options.fieldName
-    isInput = $(@el).is('input')
-
-    if @renderedData
-      groupName = el.data('group')
-      if groupName
-        selectedIndex = el.data('index')
-        selectedObject = @renderedData[groupName][selectedIndex]
-      else
-        selectedIndex = el.closest('li').index()
-        selectedObject = @renderedData[selectedIndex]
-
-    value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
-
-    if isInput
-      field = $(@el)
-    else
-      field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
-
-    if el.hasClass(ACTIVE_CLASS)
-      el.removeClass(ACTIVE_CLASS)
-
-      if isInput
-        field.val('')
-      else
-        field.remove()
-
-      # Toggle the dropdown label
-      if @options.toggleLabel
-        @updateLabel(selectedObject, el, @)
-      else
-        selectedObject
-    else if el.hasClass(INDETERMINATE_CLASS)
-      el.addClass ACTIVE_CLASS
-      el.removeClass INDETERMINATE_CLASS
-
-      if not value?
-        field.remove()
-
-      if not field.length and fieldName
-        @addInput(fieldName, value)
-
-      return selectedObject
-    else
-      if not @options.multiSelect or el.hasClass('dropdown-clear-active')
-        @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
-
-        unless isInput
-          @dropdown.parent().find("input[name='#{fieldName}']").remove()
-
-      if !value?
-        field.remove()
-
-      # Toggle active class for the tick mark
-      el.addClass ACTIVE_CLASS
-
-      # Toggle the dropdown label
-      if @options.toggleLabel
-        @updateLabel(selectedObject, el, @)
-      if value?
-        if !field.length and fieldName
-          @addInput(fieldName, value)
-        else
-          field
-            .val value
-            .trigger 'change'
-
-      return selectedObject
-
-  addInput: (fieldName, value)->
-    # Create hidden input for form
-    $input = $('<input>').attr('type', 'hidden')
-                         .attr('name', fieldName)
-                        .val(value)
-
-    if @options.inputId?
-      $input.attr('id', @options.inputId)
-
-    @dropdown.before $input
-
-  selectRowAtIndex: (e, index) ->
-    # Dropdown list item link selector, excluding non-selectable list items
-    selector = "#{SELECTABLE_CLASSES}:eq(#{index}) a"
-
-    if @dropdown.find(".dropdown-toggle-page").length
-      selector = ".dropdown-page-one #{selector}"
-
-    # simulate a click on the first link
-    $el = $(selector, @dropdown)
-
-    if $el.length
-      e.preventDefault()
-      e.stopImmediatePropagation()
-      $el.first().trigger('click')
-      href = $el.attr 'href'
-      Turbolinks.visit(href) if href and href isnt '#'
-
-  addArrowKeyEvent: ->
-    ARROW_KEY_CODES = [38, 40]
-    $input = @dropdown.find(".dropdown-input-field")
-
-    # Dropdown list item selector, excluding non-selectable list items
-    selector = SELECTABLE_CLASSES
-    if @dropdown.find('.dropdown-toggle-page').length
-      selector = ".dropdown-page-one #{selector}"
-
-    $('body').on 'keydown', (e) =>
-      currentKeyCode = e.which
-
-      if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0
-        e.preventDefault()
-        e.stopImmediatePropagation()
-
-        PREV_INDEX = currentIndex
-        $listItems = $(selector, @dropdown)
-
-        # if @options.filterable
-        #   $input.blur()
-
-        if currentKeyCode is 40
-          # Move down
-          currentIndex += 1 if currentIndex < ($listItems.length - 1)
-        else if currentKeyCode is 38
-          # Move up
-          currentIndex -= 1 if currentIndex > 0
-
-        @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
-
-        return false
-
-      # If enter is pressed and a row is highlighted, select it
-      if currentKeyCode is 13 and currentIndex isnt -1
-        e.preventDefault()
-        e.stopImmediatePropagation()
-        @selectRowAtIndex e, currentIndex
-
-  removeArrayKeyEvent: ->
-    $('body').off 'keydown'
-
-  # Resets the currently selected item row index and removes all highlights
-  resetRows: ->
-    currentIndex = -1
-    $('.is-focused', @dropdown).removeClass 'is-focused'
-
-  highlightRowAtIndex: ($listItems, index) ->
-    # Remove the class for the previously focused row
-    $('.is-focused', @dropdown).removeClass 'is-focused'
-
-    # Update the class for the row at the specific index
-    $listItem = $listItems.eq(index)
-    $listItem.find('a:first-child').addClass "is-focused"
-
-    # Dropdown content scroll area
-    $dropdownContent = $listItem.closest('.dropdown-content')
-    dropdownScrollTop = $dropdownContent.scrollTop()
-    dropdownContentHeight = $dropdownContent.outerHeight()
-    dropdownContentTop = $dropdownContent.prop('offsetTop')
-    dropdownContentBottom = dropdownContentTop + dropdownContentHeight
-
-    # Get the offset bottom of the list item
-    listItemHeight = $listItem.outerHeight()
-    listItemTop = $listItem.prop('offsetTop')
-    listItemBottom = listItemTop + listItemHeight
-
-    if index is 0
-      # If this is the first item in the list, scroll to the top
-      $dropdownContent.scrollTop(0)
-    else if index is $listItems.length - 1
-      # If this is the last item in the list, scroll to the bottom
-      $dropdownContent.scrollTop $dropdownContent.prop 'scrollHeight'
-    else if listItemBottom > dropdownContentBottom + dropdownScrollTop
-      # Scroll the dropdown content down with a little padding
-      $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING)
-    else if listItemTop < dropdownContentTop + dropdownScrollTop
-      # Scroll the dropdown content up with a little padding
-      $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING)
-
-  updateLabel: (selected = null, el = null, instance = null) =>
-    $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selected, el, instance)
-
-$.fn.glDropdown = (opts) ->
-  return @.each ->
-    if (!$.data @, 'glDropdown')
-      $.data(@, 'glDropdown', new GitLabDropdown @, opts)
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 990f6536eb2..cd39f5f94e2 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -7,7 +7,9 @@
     KEYCODE = {
       ESCAPE: 27,
       BACKSPACE: 8,
-      ENTER: 13
+      ENTER: 13,
+      UP: 38,
+    	DOWN: 40
     };
 
     function SearchAutocomplete(opts) {
@@ -223,6 +225,12 @@
         case KEYCODE.ESCAPE:
           this.restoreOriginalState();
           break;
+        case KEYCODE.ENTER:
+    	    this.disableAutocomplete();
+          break;
+    	  case KEYCODE.UP,
+        case KEYCODE.DOWN:
+    	   return;
         default:
           if (this.searchInput.val() === '') {
             this.disableAutocomplete();
@@ -319,9 +327,11 @@
     };
 
     SearchAutocomplete.prototype.disableAutocomplete = function() {
-      this.searchInput.addClass('disabled');
-      this.dropdown.removeClass('open');
-      return this.restoreMenu();
+      if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('open')) {
+        this.searchInput.addClass('disabled');
+        this.dropdown.removeClass('open').trigger('hidden.bs.dropdown');
+        this.restoreMenu();
+      }
     };
 
     SearchAutocomplete.prototype.restoreMenu = function() {
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
deleted file mode 100644
index fc74959b1e1..00000000000
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ /dev/null
@@ -1,348 +0,0 @@
-class @SearchAutocomplete
-
-  KEYCODE =
-    ESCAPE: 27
-    BACKSPACE: 8
-    ENTER: 13
-    UP: 38
-    DOWN: 40
-
-  constructor: (opts = {}) ->
-    {
-      @wrap = $('.search')
-
-      @optsEl = @wrap.find('.search-autocomplete-opts')
-      @autocompletePath = @optsEl.data('autocomplete-path')
-      @projectId = @optsEl.data('autocomplete-project-id') || ''
-      @projectRef = @optsEl.data('autocomplete-project-ref') || ''
-
-    } = opts
-
-    # Dropdown Element
-    @dropdown = @wrap.find('.dropdown')
-    @dropdownContent = @dropdown.find('.dropdown-content')
-
-    @locationBadgeEl = @getElement('.location-badge')
-    @scopeInputEl = @getElement('#scope')
-    @searchInput = @getElement('.search-input')
-    @projectInputEl = @getElement('#search_project_id')
-    @groupInputEl = @getElement('#group_id')
-    @searchCodeInputEl = @getElement('#search_code')
-    @repositoryInputEl = @getElement('#repository_ref')
-    @clearInput = @getElement('.js-clear-input')
-
-    @saveOriginalState()
-
-    # Only when user is logged in
-    @createAutocomplete() if gon.current_user_id
-
-    @searchInput.addClass('disabled')
-
-    @saveTextLength()
-
-    @bindEvents()
-
-  # Finds an element inside wrapper element
-  getElement: (selector) ->
-    @wrap.find(selector)
-
-  saveOriginalState: ->
-    @originalState = @serializeState()
-
-  saveTextLength: ->
-    @lastTextLength = @searchInput.val().length
-
-  createAutocomplete: ->
-    @searchInput.glDropdown
-        filterInputBlur: false
-        filterable: true
-        filterRemote: true
-        highlight: true
-        enterCallback: false
-        filterInput: 'input#search'
-        search:
-          fields: ['text']
-        data: @getData.bind(@)
-        selectable: true
-        clicked: @onClick.bind(@)
-
-  getData: (term, callback) ->
-    _this = @
-
-    unless term
-      if contents = @getCategoryContents()
-        @searchInput.data('glDropdown').filter.options.callback contents
-        @enableAutocomplete()
-
-      return
-
-    # Prevent multiple ajax calls
-    return if @loadingSuggestions
-
-    @loadingSuggestions = true
-
-    jqXHR = $.get(@autocompletePath, {
-        project_id: @projectId
-        project_ref: @projectRef
-        term: term
-      }, (response) ->
-        # Hide dropdown menu if no suggestions returns
-        if !response.length
-          _this.disableAutocomplete()
-          return
-
-        data = []
-
-        # List results
-        firstCategory = true
-        for suggestion in response
-
-          # Add group header before list each group
-          if lastCategory isnt suggestion.category
-            data.push 'separator' if !firstCategory
-
-            firstCategory = false if firstCategory
-
-            data.push
-              header: suggestion.category
-
-            lastCategory = suggestion.category
-
-          data.push
-            id: "#{suggestion.category.toLowerCase()}-#{suggestion.id}"
-            category: suggestion.category
-            text: suggestion.label
-            url: suggestion.url
-
-        # Add option to proceed with the search
-        if data.length
-          data.push('separator')
-          data.push
-            text: "Result name contains \"#{term}\""
-            url: "/search?\
-                  search=#{term}\
-                  &project_id=#{_this.projectInputEl.val()}\
-                  &group_id=#{_this.groupInputEl.val()}"
-
-        callback(data)
-    ).always ->
-      _this.loadingSuggestions = false
-
-
-  getCategoryContents: ->
-
-    userId = gon.current_user_id
-    { utils, projectOptions, groupOptions, dashboardOptions } = gl
-
-    if utils.isInGroupsPage() and groupOptions
-      options = groupOptions[utils.getGroupSlug()]
-
-    else if utils.isInProjectPage() and projectOptions
-      options = projectOptions[utils.getProjectSlug()]
-
-    else if dashboardOptions
-      options = dashboardOptions
-
-    { issuesPath, mrPath, name } = options
-
-    items = [
-      { header: "#{name}" }
-      { text: 'Issues assigned to me', url: "#{issuesPath}/?assignee_id=#{userId}" }
-      { text: "Issues I've created",   url: "#{issuesPath}/?author_id=#{userId}"   }
-      'separator'
-      { text: 'Merge requests assigned to me', url: "#{mrPath}/?assignee_id=#{userId}" }
-      { text: "Merge requests I've created",   url: "#{mrPath}/?author_id=#{userId}"   }
-    ]
-
-    items.splice 0, 1 unless name
-
-    return items
-
-
-  serializeState: ->
-    {
-      # Search Criteria
-      search_project_id: @projectInputEl.val()
-      group_id: @groupInputEl.val()
-      search_code: @searchCodeInputEl.val()
-      repository_ref: @repositoryInputEl.val()
-      scope: @scopeInputEl.val()
-
-      # Location badge
-      _location: @locationBadgeEl.text()
-    }
-
-  bindEvents: ->
-    @searchInput.on 'keydown', @onSearchInputKeyDown
-    @searchInput.on 'keyup', @onSearchInputKeyUp
-    @searchInput.on 'click', @onSearchInputClick
-    @searchInput.on 'focus', @onSearchInputFocus
-    @searchInput.on 'blur', @onSearchInputBlur
-    @clearInput.on 'click', @onClearInputClick
-    @locationBadgeEl.on 'click', =>
-      @searchInput.focus()
-
-  enableAutocomplete: ->
-    # No need to enable anything if user is not logged in
-    return if !gon.current_user_id
-
-    unless @dropdown.hasClass('open')
-      _this = @
-      @loadingSuggestions = false
-
-    # If not enabled already, enable
-    if not @dropdown.hasClass('open')
-      # Open dropdown and invoke its opened() method
-      @dropdown.addClass('open')
-        .trigger('shown.bs.dropdown')
-      @searchInput.removeClass('disabled')
-
-  onSearchInputKeyDown: =>
-    # Saves last length of the entered text
-    @saveTextLength()
-
-  onSearchInputKeyUp: (e) =>
-    switch e.keyCode
-      when KEYCODE.BACKSPACE
-        # when trying to remove the location badge
-        if @lastTextLength is 0 and @badgePresent()
-          @removeLocationBadge()
-
-        # When removing the last character and no badge is present
-        if @lastTextLength is 1
-          @disableAutocomplete()
-
-        # When removing any character from existin value
-        if @lastTextLength > 1
-          @enableAutocomplete()
-
-      when KEYCODE.ESCAPE
-        @restoreOriginalState()
-
-      # Close autocomplete on enter
-      when KEYCODE.ENTER
-        @disableAutocomplete()
-
-      when KEYCODE.UP, KEYCODE.DOWN
-        return
-
-      else
-        # Handle the case when deleting the input value other than backspace
-        # e.g. Pressing ctrl + backspace or ctrl + x
-        if @searchInput.val() is ''
-          @disableAutocomplete()
-        else
-          # We should display the menu only when input is not empty
-          @enableAutocomplete()
-
-    @wrap.toggleClass 'has-value', !!e.target.value
-
-    # Avoid falsy value to be returned
-    return
-
-  onSearchInputClick: (e) =>
-    # Prevents closing the dropdown menu
-    e.stopImmediatePropagation()
-
-  onSearchInputFocus: =>
-    @isFocused = true
-    @wrap.addClass('search-active')
-
-    @getData()  if @getValue() is ''
-
-
-  getValue: -> return @searchInput.val()
-
-
-  onClearInputClick: (e) =>
-    e.preventDefault()
-    @searchInput.val('').focus()
-
-  onSearchInputBlur: (e) =>
-    @isFocused = false
-    @wrap.removeClass('search-active')
-
-    # If input is blank then restore state
-    if @searchInput.val() is ''
-      @restoreOriginalState()
-
-  addLocationBadge: (item) ->
-    category = if item.category? then "#{item.category}: " else ''
-    value = if item.value? then item.value else ''
-
-    badgeText = "#{category}#{value}"
-    @locationBadgeEl.text(badgeText).show()
-    @wrap.addClass('has-location-badge')
-
-
-  hasLocationBadge: -> return @wrap.is '.has-location-badge'
-
-
-  restoreOriginalState: ->
-    inputs = Object.keys @originalState
-
-    for input in inputs
-      @getElement("##{input}").val(@originalState[input])
-
-    if @originalState._location is ''
-      @locationBadgeEl.hide()
-    else
-      @addLocationBadge(
-        value: @originalState._location
-      )
-
-  badgePresent: ->
-    @locationBadgeEl.length
-
-  resetSearchState: ->
-    inputs = Object.keys @originalState
-
-    for input in inputs
-
-      # _location isnt a input
-      break if input is '_location'
-
-      @getElement("##{input}").val('')
-
-
-  removeLocationBadge: ->
-
-    @locationBadgeEl.hide()
-    @resetSearchState()
-    @wrap.removeClass('has-location-badge')
-    @disableAutocomplete()
-
-
-  disableAutocomplete: ->
-    # If not disabled already, disable
-    if not @searchInput.hasClass('disabled') and @dropdown.hasClass 'open'
-      @searchInput.addClass('disabled')
-      # Close dropdown and invoke its hidden() method
-      @dropdown.removeClass('open').trigger 'hidden.bs.dropdown'
-      @restoreMenu()
-
-  restoreMenu: ->
-    html = "<ul>
-              <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
-            </ul>"
-    @dropdownContent.html(html)
-
-  onClick: (item, $el, e) ->
-    if location.pathname.indexOf(item.url) isnt -1
-      e.preventDefault()
-      if not @badgePresent
-        if item.category is 'Projects'
-          @projectInputEl.val(item.id)
-          @addLocationBadge(
-            value: 'This project'
-          )
-
-        if item.category is 'Groups'
-          @groupInputEl.val(item.id)
-          @addLocationBadge(
-            value: 'This group'
-          )
-
-      $el.removeClass('is-active')
-      @disableAutocomplete()
-      @searchInput.val('').focus()
diff --git a/spec/javascripts/gl_dropdown_spec.js.coffee b/spec/javascripts/gl_dropdown_spec.js.coffee
deleted file mode 100644
index a4b3f519745..00000000000
--- a/spec/javascripts/gl_dropdown_spec.js.coffee
+++ /dev/null
@@ -1,97 +0,0 @@
-#= require jquery
-#= require gl_dropdown
-#= require turbolinks
-#= require lib/utils/common_utils
-#= require lib/utils/type_utility
-
-NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
-ITEM_SELECTOR = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
-FOCUSED_ITEM_SELECTOR = ITEM_SELECTOR + ' a.is-focused'
-
-ARROW_KEYS =
-  DOWN: 40
-  UP: 38
-  ENTER: 13
-  ESC: 27
-
-navigateWithKeys = (direction, steps, cb, i) ->
-  i = i || 0
-  $('body').trigger
-    type: 'keydown'
-    which: ARROW_KEYS[direction.toUpperCase()]
-    keyCode: ARROW_KEYS[direction.toUpperCase()]
-  i++
-  if i <= steps
-    navigateWithKeys direction, steps, cb, i
-  else
-    cb()
-
-initDropdown = ->
-  @dropdownContainerElement = $('.dropdown.inline')
-  @dropdownMenuElement = $('.dropdown-menu', @dropdownContainerElement)
-  @projectsData = fixture.load('projects.json')[0]
-  @dropdownButtonElement = $('#js-project-dropdown', @dropdownContainerElement).glDropdown
-    selectable: true
-    data: @projectsData
-    text: (project) ->
-      (project.name_with_namespace or project.name)
-    id: (project) ->
-      project.id
-
-describe 'Dropdown', ->
-  fixture.preload 'gl_dropdown.html'
-  fixture.preload 'projects.json'
-
-  beforeEach ->
-    fixture.load 'gl_dropdown.html'
-    initDropdown.call this
-
-  afterEach ->
-    $('body').unbind 'keydown'
-    @dropdownContainerElement.unbind 'keyup'
-
-  it 'should open on click', ->
-    expect(@dropdownContainerElement).not.toHaveClass 'open'
-    @dropdownButtonElement.click()
-    expect(@dropdownContainerElement).toHaveClass 'open'
-
-  describe 'that is open', ->
-    beforeEach ->
-      @dropdownButtonElement.click()
-
-    it 'should select a following item on DOWN keypress', ->
-      expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 0
-      randomIndex = Math.floor(Math.random() * (@projectsData.length - 1)) + 0
-      navigateWithKeys 'down', randomIndex, =>
-        expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
-        expect($("#{ITEM_SELECTOR}:eq(#{randomIndex}) a", @dropdownMenuElement)).toHaveClass 'is-focused'
-
-    it 'should select a previous item on UP keypress', ->
-      expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 0
-      navigateWithKeys 'down', (@projectsData.length - 1), =>
-        expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
-        randomIndex = Math.floor(Math.random() * (@projectsData.length - 2)) + 0
-        navigateWithKeys 'up', randomIndex, =>
-          expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
-          expect($("#{ITEM_SELECTOR}:eq(#{((@projectsData.length - 2) - randomIndex)}) a", @dropdownMenuElement)).toHaveClass 'is-focused'
-
-    it 'should click the selected item on ENTER keypress', ->
-      expect(@dropdownContainerElement).toHaveClass 'open'
-      randomIndex = Math.floor(Math.random() * (@projectsData.length - 1)) + 0
-      navigateWithKeys 'down', randomIndex, =>
-        spyOn(Turbolinks, 'visit').and.stub()
-        navigateWithKeys 'enter', null, =>
-          expect(@dropdownContainerElement).not.toHaveClass 'open'
-          link = $("#{ITEM_SELECTOR}:eq(#{randomIndex}) a", @dropdownMenuElement)
-          expect(link).toHaveClass 'is-active'
-          linkedLocation = link.attr 'href'
-          if linkedLocation and linkedLocation isnt '#'
-            expect(Turbolinks.visit).toHaveBeenCalledWith linkedLocation
-
-    it 'should close on ESC keypress', ->
-      expect(@dropdownContainerElement).toHaveClass 'open'
-      @dropdownContainerElement.trigger
-        type: 'keyup'
-        which: ARROW_KEYS.ESC
-        keyCode: ARROW_KEYS.ESC
-      expect(@dropdownContainerElement).not.toHaveClass 'open'
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
new file mode 100644
index 00000000000..733fccc51d9
--- /dev/null
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -0,0 +1,120 @@
+/*= require jquery */
+/*= require gl_dropdown */
+/*= require turbolinks */
+/*= require lib/utils/common_utils */
+/*= require lib/utils/type_utility */
+
+const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
+const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
+
+const ARROW_KEYS = {
+  DOWN: 40,
+  UP: 38,
+  ENTER: 13,
+  ESC: 27
+};
+
+var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
+  i = i || 0;
+  $('body').trigger({
+    type: 'keydown',
+    which: ARROW_KEYS[direction.toUpperCase()],
+    keyCode: ARROW_KEYS[direction.toUpperCase()]
+  });
+  i++;
+  if (i <= steps) {
+    navigateWithKeys(direction, steps, cb, i);
+  } else {
+    cb();
+  }
+};
+
+var initDropdown = function initDropdown() {
+  this.dropdownContainerElement = $('.dropdown.inline');
+  this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
+  this.projectsData = fixture.load('projects.json')[0];
+  this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
+    selectable: true,
+    data: this.projectsData,
+    text: (project) => {
+      (project.name_with_namespace || project.name)
+    },
+    id: (project) => {
+      project.id
+    }
+  });
+};
+
+describe('Dropdown', function describeDropdown() {
+  fixture.preload('gl_dropdown.html');
+  fixture.preload('projects.json');
+
+  function beforeEach() {
+    fixture.load('gl_dropdown.html');
+    initDropdown.call(this);
+  }
+
+  function afterEach() {
+    $('body').unbind('keydown');
+    this.dropdownContainerElement.unbind('keyup');
+  }
+
+  it('should open on click', () => {
+    expect(this.dropdownContainerElement).not.toHaveClass('open');
+    this.dropdownButtonElement.click();
+    expect(this.dropdownContainerElement).toHaveClass('open');
+  });
+
+  describe('that is open', function describeThatIsOpen() {
+    function beforeEach() {
+      this.dropdownButtonElement.click();
+    }
+
+    it('should select a following item on DOWN keypress', () => {
+      expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+      let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
+      navigateWithKeys('down', randomIndex, () => {
+        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+        expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+      });
+    });
+
+    it('should select a previous item on UP keypress', () => {
+      expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+      navigateWithKeys('down', (this.projectsData.length - 1), () => {
+        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+        let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
+        navigateWithKeys('up', randomIndex, () => {
+          expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+          expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+        });
+      });
+    });
+
+    it('should click the selected item on ENTER keypress', () => {
+      expect(this.dropdownContainerElement).toHaveClass('open')
+      let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
+      navigateWithKeys('down', randomIndex, () => {
+        spyOn(Turbolinks, 'visit').and.stub();
+        navigateWithKeys('enter', null, () => {
+          expect(this.dropdownContainerElement).not.toHaveClass('open');
+          let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
+          expect(link).toHaveClass('is-active');
+          let linkedLocation = link.attr('href');
+          if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
+        });
+      });
+    });
+
+    it('should close on ESC keypress', () => {
+      expect(this.dropdownContainerElement).toHaveClass('open');
+      this.dropdownContainerElement.trigger({
+        type: 'keyup',
+        which: ARROW_KEYS.ESC,
+        keyCode: ARROW_KEYS.ESC
+      });
+      expect(this.dropdownContainerElement).not.toHaveClass('open');
+    });
+  });
+});
-- 
cgit v1.2.1


From f91fd18f25626dc3e76c9aefef2841f685fab26c Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Wed, 27 Jul 2016 17:38:08 +0100
Subject: Improved spec, waiting on sprockets-es6 to work with rspec....

---
 spec/javascripts/gl_dropdown_spec.js.es6 | 186 ++++++++++++++++---------------
 1 file changed, 94 insertions(+), 92 deletions(-)

diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index 733fccc51d9..2dda566beb6 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -4,117 +4,119 @@
 /*= require lib/utils/common_utils */
 /*= require lib/utils/type_utility */
 
-const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
-const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
-const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
+(() => {
+  const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+  const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
+  const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
 
-const ARROW_KEYS = {
-  DOWN: 40,
-  UP: 38,
-  ENTER: 13,
-  ESC: 27
-};
+  const ARROW_KEYS = {
+    DOWN: 40,
+    UP: 38,
+    ENTER: 13,
+    ESC: 27
+  };
 
-var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
-  i = i || 0;
-  $('body').trigger({
-    type: 'keydown',
-    which: ARROW_KEYS[direction.toUpperCase()],
-    keyCode: ARROW_KEYS[direction.toUpperCase()]
-  });
-  i++;
-  if (i <= steps) {
-    navigateWithKeys(direction, steps, cb, i);
-  } else {
-    cb();
-  }
-};
-
-var initDropdown = function initDropdown() {
-  this.dropdownContainerElement = $('.dropdown.inline');
-  this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
-  this.projectsData = fixture.load('projects.json')[0];
-  this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
-    selectable: true,
-    data: this.projectsData,
-    text: (project) => {
-      (project.name_with_namespace || project.name)
-    },
-    id: (project) => {
-      project.id
+  var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
+    i = i || 0;
+    $('body').trigger({
+      type: 'keydown',
+      which: ARROW_KEYS[direction.toUpperCase()],
+      keyCode: ARROW_KEYS[direction.toUpperCase()]
+    });
+    i++;
+    if (i <= steps) {
+      navigateWithKeys(direction, steps, cb, i);
+    } else {
+      cb();
     }
-  });
-};
+  };
 
-describe('Dropdown', function describeDropdown() {
-  fixture.preload('gl_dropdown.html');
-  fixture.preload('projects.json');
+  var initDropdown = function initDropdown() {
+    this.dropdownContainerElement = $('.dropdown.inline');
+    this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
+    this.projectsData = fixture.load('projects.json')[0];
+    this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
+      selectable: true,
+      data: this.projectsData,
+      text: (project) => {
+        (project.name_with_namespace || project.name)
+      },
+      id: (project) => {
+        project.id
+      }
+    });
+  };
 
-  function beforeEach() {
-    fixture.load('gl_dropdown.html');
-    initDropdown.call(this);
-  }
+  describe('Dropdown', function describeDropdown() {
+    fixture.preload('gl_dropdown.html');
+    fixture.preload('projects.json');
 
-  function afterEach() {
-    $('body').unbind('keydown');
-    this.dropdownContainerElement.unbind('keyup');
-  }
+    function beforeEach() {
+      fixture.load('gl_dropdown.html');
+      initDropdown.call(this);
+    }
 
-  it('should open on click', () => {
-    expect(this.dropdownContainerElement).not.toHaveClass('open');
-    this.dropdownButtonElement.click();
-    expect(this.dropdownContainerElement).toHaveClass('open');
-  });
+    function afterEach() {
+      $('body').unbind('keydown');
+      this.dropdownContainerElement.unbind('keyup');
+    }
 
-  describe('that is open', function describeThatIsOpen() {
-    function beforeEach() {
+    it('should open on click', () => {
+      expect(this.dropdownContainerElement).not.toHaveClass('open');
       this.dropdownButtonElement.click();
-    }
+      expect(this.dropdownContainerElement).toHaveClass('open');
+    });
+
+    describe('that is open', function describeThatIsOpen() {
+      function beforeEach() {
+        this.dropdownButtonElement.click();
+      }
 
-    it('should select a following item on DOWN keypress', () => {
-      expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
-      let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
-      navigateWithKeys('down', randomIndex, () => {
-        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
-        expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+      it('should select a following item on DOWN keypress', () => {
+        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+        let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
+        navigateWithKeys('down', randomIndex, () => {
+          expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+          expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+        });
       });
-    });
 
-    it('should select a previous item on UP keypress', () => {
-      expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
-      navigateWithKeys('down', (this.projectsData.length - 1), () => {
-        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
-        let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
-        navigateWithKeys('up', randomIndex, () => {
+      it('should select a previous item on UP keypress', () => {
+        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+        navigateWithKeys('down', (this.projectsData.length - 1), () => {
           expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
-          expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+          let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
+          navigateWithKeys('up', randomIndex, () => {
+            expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+            expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+          });
         });
       });
-    });
 
-    it('should click the selected item on ENTER keypress', () => {
-      expect(this.dropdownContainerElement).toHaveClass('open')
-      let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
-      navigateWithKeys('down', randomIndex, () => {
-        spyOn(Turbolinks, 'visit').and.stub();
-        navigateWithKeys('enter', null, () => {
-          expect(this.dropdownContainerElement).not.toHaveClass('open');
-          let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
-          expect(link).toHaveClass('is-active');
-          let linkedLocation = link.attr('href');
-          if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
+      it('should click the selected item on ENTER keypress', () => {
+        expect(this.dropdownContainerElement).toHaveClass('open')
+        let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
+        navigateWithKeys('down', randomIndex, () => {
+          spyOn(Turbolinks, 'visit').and.stub();
+          navigateWithKeys('enter', null, () => {
+            expect(this.dropdownContainerElement).not.toHaveClass('open');
+            let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
+            expect(link).toHaveClass('is-active');
+            let linkedLocation = link.attr('href');
+            if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
+          });
         });
       });
-    });
 
-    it('should close on ESC keypress', () => {
-      expect(this.dropdownContainerElement).toHaveClass('open');
-      this.dropdownContainerElement.trigger({
-        type: 'keyup',
-        which: ARROW_KEYS.ESC,
-        keyCode: ARROW_KEYS.ESC
+      it('should close on ESC keypress', () => {
+        expect(this.dropdownContainerElement).toHaveClass('open');
+        this.dropdownContainerElement.trigger({
+          type: 'keyup',
+          which: ARROW_KEYS.ESC,
+          keyCode: ARROW_KEYS.ESC
+        });
+        expect(this.dropdownContainerElement).not.toHaveClass('open');
       });
-      expect(this.dropdownContainerElement).not.toHaveClass('open');
     });
   });
-});
+})(window);
-- 
cgit v1.2.1


From 49c7ca2a27639809dd84975d7595787ab5f60647 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Thu, 28 Jul 2016 17:32:43 +0100
Subject: Fixed spec and improved formatting

---
 app/assets/javascripts/gl_dropdown.js         |  4 +-
 app/assets/javascripts/search_autocomplete.js |  2 +-
 spec/javascripts/gl_dropdown_spec.js.es6      | 53 +++++++++++++--------------
 3 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index aacc49be1ac..58e27acf2f1 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -690,8 +690,8 @@
       if (!index) {
         $dropdownContent.scrollTop(0)
 	    } else if (index === ($listItems.length - 1)) {
-  	    $dropdownContent.scrollTop $dropdownContent.prop('scrollHeight');
-      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop))
+  	    $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
+      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop)) {
         $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
       } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
         return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index cd39f5f94e2..4579214bd2f 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -228,7 +228,7 @@
         case KEYCODE.ENTER:
     	    this.disableAutocomplete();
           break;
-    	  case KEYCODE.UP,
+    	  case KEYCODE.UP:
         case KEYCODE.DOWN:
     	   return;
         default:
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index 2dda566beb6..4ed194f5179 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -16,12 +16,13 @@
     ESC: 27
   };
 
-  var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
+  let navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
     i = i || 0;
+    if (!i) direction = direction.toUpperCase();
     $('body').trigger({
       type: 'keydown',
-      which: ARROW_KEYS[direction.toUpperCase()],
-      keyCode: ARROW_KEYS[direction.toUpperCase()]
+      which: ARROW_KEYS[direction],
+      keyCode: ARROW_KEYS[direction]
     });
     i++;
     if (i <= steps) {
@@ -31,35 +32,31 @@
     }
   };
 
-  var initDropdown = function initDropdown() {
-    this.dropdownContainerElement = $('.dropdown.inline');
-    this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
-    this.projectsData = fixture.load('projects.json')[0];
-    this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
-      selectable: true,
-      data: this.projectsData,
-      text: (project) => {
-        (project.name_with_namespace || project.name)
-      },
-      id: (project) => {
-        project.id
-      }
-    });
-  };
-
   describe('Dropdown', function describeDropdown() {
     fixture.preload('gl_dropdown.html');
     fixture.preload('projects.json');
 
-    function beforeEach() {
+    beforeEach(() => {
       fixture.load('gl_dropdown.html');
-      initDropdown.call(this);
-    }
+      this.dropdownContainerElement = $('.dropdown.inline');
+      this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
+      this.projectsData = fixture.load('projects.json')[0];
+      this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
+        selectable: true,
+        data: this.projectsData,
+        text: (project) => {
+          (project.name_with_namespace || project.name)
+        },
+        id: (project) => {
+          project.id
+        }
+      });
+    });
 
-    function afterEach() {
+    afterEach(() => {
       $('body').unbind('keydown');
       this.dropdownContainerElement.unbind('keyup');
-    }
+    });
 
     it('should open on click', () => {
       expect(this.dropdownContainerElement).not.toHaveClass('open');
@@ -67,10 +64,10 @@
       expect(this.dropdownContainerElement).toHaveClass('open');
     });
 
-    describe('that is open', function describeThatIsOpen() {
-      function beforeEach() {
+    describe('that is open', () => {
+      beforeEach(() => {
         this.dropdownButtonElement.click();
-      }
+      });
 
       it('should select a following item on DOWN keypress', () => {
         expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
@@ -119,4 +116,4 @@
       });
     });
   });
-})(window);
+})();
-- 
cgit v1.2.1


From 3e1e9b670fdb12159e31664c3757df6696db90e1 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Thu, 28 Jul 2016 23:46:41 +0100
Subject: Fixed specs

---
 app/assets/javascripts/gl_dropdown.js        | 5 +++--
 spec/javascripts/search_autocomplete_spec.js | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 58e27acf2f1..7f7f76224c4 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -617,6 +617,7 @@
       }
       $el = $(selector, this.dropdown);
       if ($el.length) {
+        return $el.first().trigger('click');
         e.preventDefault();
         e.stopImmediatePropagation();
         $el.first().trigger('click');
@@ -690,8 +691,8 @@
       if (!index) {
         $dropdownContent.scrollTop(0)
 	    } else if (index === ($listItems.length - 1)) {
-  	    $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
-      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop)) {
+  	    $dropdownContent.scrollTop $dropdownContent.prop('scrollHeight');
+      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop))
         $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
       } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
         return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
diff --git a/spec/javascripts/search_autocomplete_spec.js b/spec/javascripts/search_autocomplete_spec.js
index 68d64483d67..324f5152780 100644
--- a/spec/javascripts/search_autocomplete_spec.js
+++ b/spec/javascripts/search_autocomplete_spec.js
@@ -105,13 +105,13 @@
     a3 = "a[href='" + mrsAssignedToMeLink + "']";
     a4 = "a[href='" + mrsIHaveCreatedLink + "']";
     expect(list.find(a1).length).toBe(1);
-    expect(list.find(a1).text()).toBe(' Issues assigned to me ');
+    expect(list.find(a1).text()).toBe('Issues assigned to me');
     expect(list.find(a2).length).toBe(1);
-    expect(list.find(a2).text()).toBe(" Issues I've created ");
+    expect(list.find(a2).text()).toBe("Issues I've created");
     expect(list.find(a3).length).toBe(1);
-    expect(list.find(a3).text()).toBe(' Merge requests assigned to me ');
+    expect(list.find(a3).text()).toBe('Merge requests assigned to me');
     expect(list.find(a4).length).toBe(1);
-    return expect(list.find(a4).text()).toBe(" Merge requests I've created ");
+    return expect(list.find(a4).text()).toBe("Merge requests I've created");
   };
 
   describe('Search autocomplete dropdown', function() {
-- 
cgit v1.2.1


From 2f8fada6c06d7ed67307119bf22e9743429c18be Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Thu, 11 Aug 2016 15:10:23 +0100
Subject: Fixed conflicts

---
 app/assets/javascripts/gl_dropdown.js         | 27 ++++++++++++---------------
 app/assets/javascripts/search_autocomplete.js |  2 +-
 spec/javascripts/gl_dropdown_spec.js.es6      |  4 ++--
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 7f7f76224c4..bbda6387c77 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -111,9 +111,9 @@
             matches = fuzzaldrinPlus.match($el.text().trim(), search_text);
             if (!$el.is('.dropdown-header')) {
               if (matches.length) {
-                return $el.show();
+                return $el.show().removeClass('option-hidden');
               } else {
-                return $el.hide();
+                return $el.hide().addClass('option-hidden');
               }
             }
           });
@@ -191,9 +191,9 @@
 
     currentIndex = -1;
 
-    NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+    NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link, .option-hidden';
 
-  	SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ")";
+    SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ")";
 
     CURSOR_SELECT_SCROLL_PADDING = 5
 
@@ -247,7 +247,7 @@
           keys: searchFields,
           elements: (function(_this) {
             return function() {
-              selector = SELECTABLE_CLASSES;
+              selector = '.dropdown-content li:not(' + NON_SELECTABLE_CLASSES + ')';
               if (_this.dropdown.find('.dropdown-toggle-page').length) {
                 selector = ".dropdown-page-one " + selector;
               }
@@ -263,7 +263,7 @@
             return function(data) {
               _this.parseData(data);
               if (_this.filterInput.val() !== '') {
-                selector = '.dropdown-content li:not(.divider):visible';
+                selector = SELECTABLE_CLASSES;
                 if (_this.dropdown.find('.dropdown-toggle-page').length) {
                   selector = ".dropdown-page-one " + selector;
                 }
@@ -502,7 +502,7 @@
           text = this.highlightTextMatches(text, this.filterInput.val());
         }
         if (group) {
-          groupAttrs = "data-group='" + group + "' data-index='" + index + "'";
+          groupAttrs = 'data-group=' + group + ' data-index=' + index;
         } else {
           groupAttrs = '';
         }
@@ -617,11 +617,8 @@
       }
       $el = $(selector, this.dropdown);
       if ($el.length) {
-        return $el.first().trigger('click');
-        e.preventDefault();
-        e.stopImmediatePropagation();
         $el.first().trigger('click');
-        href = $el.attr('href');
+        var href = $el.attr('href');
   	    if (href && href !== '#') Turbolinks.visit(href);
       }
     };
@@ -671,8 +668,8 @@
     };
 
     GitLabDropdown.prototype.resetRows = function resetRows() {
-	    currentIndex = -1;
-	    $('.is-focused', this.dropdown).removeClass('is-focused');
+      currentIndex = -1;
+      $('.is-focused', this.dropdown).removeClass('is-focused');
     };
 
     GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
@@ -691,8 +688,8 @@
       if (!index) {
         $dropdownContent.scrollTop(0)
 	    } else if (index === ($listItems.length - 1)) {
-  	    $dropdownContent.scrollTop $dropdownContent.prop('scrollHeight');
-      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop))
+  	    $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
+      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop)) {
         $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
       } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
         return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 4579214bd2f..37451d406ec 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -9,7 +9,7 @@
       BACKSPACE: 8,
       ENTER: 13,
       UP: 38,
-    	DOWN: 40
+      DOWN: 40
     };
 
     function SearchAutocomplete(opts) {
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index 4ed194f5179..b529ea6458d 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -45,10 +45,10 @@
         selectable: true,
         data: this.projectsData,
         text: (project) => {
-          (project.name_with_namespace || project.name)
+          (project.name_with_namespace || project.name);
         },
         id: (project) => {
-          project.id
+          project.id;
         }
       });
     });
-- 
cgit v1.2.1


From 8ade8258603586560fad50784c23e4772706973f Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Fri, 19 Aug 2016 17:17:17 +0100
Subject: review changes

---
 app/assets/javascripts/gl_dropdown.js         | 15 ++++++---------
 app/assets/javascripts/search_autocomplete.js |  6 +++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index bbda6387c77..f85aa6dd7b7 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -31,9 +31,8 @@
       this.input
         .on('keydown', function (e) {
           var keyCode = e.which;
-
           if (keyCode === 13) {
-            e.preventDefault()
+            e.preventDefault();
           }
         })
         .on('keyup', function(e) {
@@ -179,7 +178,7 @@
   })();
 
   GitLabDropdown = (function() {
-    var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, currentIndex;
+    var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, currentIndex;
 
     LOADING_CLASS = "is-loading";
 
@@ -219,7 +218,7 @@
       if (this.options.data) {
         if (_.isObject(this.options.data) && !_.isFunction(this.options.data)) {
           this.fullData = this.options.data;
-  	      currentIndex = -1
+          currentIndex = -1;
           this.parseData(this.options.data);
         } else {
           this.remote = new GitLabDropdownRemote(this.options.data, {
@@ -619,7 +618,7 @@
       if ($el.length) {
         $el.first().trigger('click');
         var href = $el.attr('href');
-  	    if (href && href !== '#') Turbolinks.visit(href);
+        if (href && href !== '#') Turbolinks.visit(href);
       }
     };
 
@@ -655,8 +654,6 @@
             return false;
           }
           if (currentKeyCode === 13 && currentIndex !== -1) {
-            e.preventDefault()
-  	        e.stopImmediatePropagation()
             return _this.selectRowAtIndex(currentIndex);
           }
         };
@@ -687,8 +684,8 @@
       listItemBottom = listItemTop + listItemHeight;
       if (!index) {
         $dropdownContent.scrollTop(0)
-	    } else if (index === ($listItems.length - 1)) {
-  	    $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
+      } else if (index === ($listItems.length - 1)) {
+        $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
       } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop)) {
         $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
       } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 37451d406ec..227e8c696b4 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -226,11 +226,11 @@
           this.restoreOriginalState();
           break;
         case KEYCODE.ENTER:
-    	    this.disableAutocomplete();
+          this.disableAutocomplete();
           break;
-    	  case KEYCODE.UP:
+        case KEYCODE.UP:
         case KEYCODE.DOWN:
-    	   return;
+          return;
         default:
           if (this.searchInput.val() === '') {
             this.disableAutocomplete();
-- 
cgit v1.2.1