Use jQuery objects in ref dropdown

app/assets/javascripts/gl_dropdown.js.coffee

@@ -280,7 +280,7 @@ class GitLabDropdown
         html = @renderData(data)
 
     # Render the full menu
-    full_html = @renderMenu(html.join(""))
+    full_html = @renderMenu(html)
 
     @appendMenu(full_html)
 
@@ -351,7 +351,8 @@ class GitLabDropdown
     if @options.renderMenu
       menu_html = @options.renderMenu(html)
     else
-      menu_html = "<ul>#{html}</ul>"
+      menu_html = $('<ul />')
+        .append(html)
 
     return menu_html
 
@@ -360,7 +361,7 @@ class GitLabDropdown
     selector = '.dropdown-content'
     if @dropdown.find(".dropdown-toggle-page").length
       selector = ".dropdown-page-one .dropdown-content"
-    $(selector, @dropdown).html html
+    $(selector, @dropdown).append html
 
   # Render the row
   renderItem: (data, group = false, index = false) ->

app/assets/javascripts/project.js.coffee

@@ -70,17 +70,20 @@ class @Project
         fieldName: 'ref'
         renderRow: (ref) ->
           if ref.header?
-            "<li class='dropdown-header'>#{ref.header}</li>"
+            $('<li />')
+              .addClass 'dropdown-header'
+              .text ref.header
           else
-            isActiveClass = if ref is selected then 'is-active' else ''
-
-            "<li>
-              <a href='#' data-ref='#{escape(ref)}' class='#{isActiveClass}'>
-                #{ref}
-              </a>
-            </li>"
+            link = $('<a />')
+              .attr 'href', '#'
+              .addClass(if ref is selected then 'is-active' else '')
+              .text ref
+              .attr 'data-ref', escape(ref)
+
+            $('<li />')
+              .append link
         id: (obj, $el) ->
-          $el.data('ref')
+          $el.attr('data-ref')
         toggleLabel: (obj, $el) ->
           $el.text().trim()
         clicked: (e) ->