       users: @results.toJSON()
 
   dispose: ->
-    @$input.off('focus.mq blur.mq keyup.mq click.mq')
+    @$input.off('focus.mq blur.mq keyup.mq click.mq keydown.mq')
     @$input = null
     @$container = null
     @undelegateEvents()

    @render()

  setVisibility: =>
    if @active && @results.length
      @$el.show()
    else
      @$el.hide()

  render: =>
    @$container.append(@$el) unless @$el.parent().length

    @active = false
    @setVisibility()

  onKeyDown: (e) =>
    if @isVisible() and e.keyCode in [13, 38, 40]
      @updateHighlight(e)

  onKeyUp: (e) =>
    # if quicksearch results are visible and the
    # user has just pressed up, down, or enter
    @extractWorkingToken(e)

  updateHighlight: (e)->
    highlightableSelector = '.mention-quicksearch__user'
    highlightedSelector = highlightableSelector + '.is-highlighted'
    highlighted = @$el.find(highlightedSelector)

    # dont interfere with enter keypress
    # when nothing is selected
    return if e.keyCode == 13 && !highlighted.length

    e.preventDefault()
    e.stopPropagation()

    # enter key
    if e.keyCode == 13
      return @onSelectUser(highlighted)
    # up arrow
    if e.keyCode == 38
      if !highlighted.length
        next = @$el.find(highlightableSelector + ':last')
      else
        next = highlighted.prev()
    # down arrow
    else if e.keyCode == 40
      if highlighted.length
        next = highlighted.next()

    if next?.length
      highlighted.removeClass('is-highlighted')
      next.addClass('is-highlighted')

  onSelectUser: (userEl) =>
    slug = $(userEl).data('slug')
    { start, end } = @workingToken
    text = @$input.val()
    newText = text.slice(0, start + 1) + slug + text.slice(end)
    caretPosition = start + 1 + slug.length

    @$el.hide()
    @$input.val(newText)
    @$input[0].setSelectionRange(caretPosition, caretPosition)

  extractWorkingToken: =>
    cursorStart = @$input[0].selectionStart
    cursorEnd = @$input[0].selectionEnd

