Use the `GLDropdown` component to select protected branches.

1. Modify the component to support a callback for every key press in the
   filter. We need this so we can update the "Create: <branch_name"
   label.

2. Modify the component to use `$(<selector>).first().click()` instead
   of `$(selector)[0].click()`, because the latter is non-standard, and
   doesn't work in PhantomJS.

app/assets/javascripts/gl_dropdown.js.coffee

@@ -56,6 +56,7 @@ class GitLabDropdownFilter
     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
@@ -195,6 +196,7 @@ class GitLabDropdown
       @filter = new GitLabDropdownFilter @filterInput,
         filterInputBlur: @filterInputBlur
         filterByText: @options.filterByText
+        onFilter: @options.onFilter
         remote: @options.filterRemote
         query: @options.data
         keys: searchFields
@@ -530,7 +532,7 @@ class GitLabDropdown
     if $el.length
       e.preventDefault()
       e.stopImmediatePropagation()
-      $(selector, @dropdown)[0].click()
+      $el.first().trigger('click')
 
   addArrowKeyEvent: ->
     ARROW_KEY_CODES = [38, 40]

app/assets/javascripts/protected_branch_select.js.coffee

@@ -0,0 +1,40 @@
+class @ProtectedBranchSelect
+  constructor: (currentProject) ->
+    $('.dropdown-footer').hide();
+    @dropdown = $('.js-protected-branch-select').glDropdown(
+      data: @getProtectedBranches
+      filterable: true
+      remote: false
+      search:
+        fields: ['title']
+      selectable: true
+      toggleLabel: (selected) -> if (selected and 'id' of selected) then selected.title else 'Protected Branch'
+      fieldName: 'protected_branch[name]'
+      text: (protected_branch) -> _.escape(protected_branch.title)
+      id: (protected_branch) -> _.escape(protected_branch.id)
+      onFilter: @toggleCreateNewButton
+      clicked: () -> $('.protect-branch-btn').attr('disabled', false)
+    )
+
+    $('.create-new-protected-branch').on 'click', (event) =>
+      # Refresh the dropdown's data, which ends up calling `getProtectedBranches`
+      @dropdown.data('glDropdown').remote.execute()
+      @dropdown.data('glDropdown').selectRowAtIndex(event, 0)
+
+  getProtectedBranches: (term, callback) =>
+    if @selectedBranch
+      callback(gon.open_branches.concat(@selectedBranch))
+    else
+      callback(gon.open_branches)
+
+  toggleCreateNewButton: (branchName) =>
+    @selectedBranch = { title: branchName, id: branchName, text: branchName }
+
+    if branchName is ''
+      $('.protected-branch-select-footer-list').addClass('hidden')
+      $('.dropdown-footer').hide();
+    else
+      $('.create-new-protected-branch').text("Create Protected Branch: #{branchName}")
+      $('.protected-branch-select-footer-list').removeClass('hidden')
+      $('.dropdown-footer').show();
+

app/controllers/projects/protected_branches_controller.rb

@@ -9,7 +9,7 @@ class Projects::ProtectedBranchesController < Projects::ApplicationController
   def index
     @protected_branches = @project.protected_branches.order(:name).page(params[:page])
     @protected_branch = @project.protected_branches.new
-    gon.push({ open_branches: @project.open_branches.map { |br| { text: br.name, id: br.name } } })
+    gon.push({ open_branches: @project.open_branches.map { |br| { text: br.name, id: br.name, title: br.name } } })
   end
 
   def create

app/views/projects/protected_branches/_dropdown.html.haml

@@ -0,0 +1,17 @@
+= f.hidden_field(:name)
+
+= dropdown_tag("Protected Branch",
+               options: { title: "Pick protected branch", toggle_class: 'js-protected-branch-select js-filter-submit',
+                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected branches",
+                          footer_content: true,
+                          data: { show_no: true, show_any: true, show_upcoming: true,
+                                  selected: params[:protected_branch_name],
+                                  project_id: @project.try(:id) } }) do
+
+  %ul.dropdown-footer-list.hidden.protected-branch-select-footer-list
+    %li
+      = link_to '#', title: "New Protected Branch", class: "create-new-protected-branch" do
+        Create new
+
+:javascript
+  new ProtectedBranchSelect();

app/views/projects/protected_branches/index.html.haml

@@ -21,7 +21,7 @@
 
         .form-group
           = f.label :name, "Branch", class: "label-light"
-          = f.text_field(:name)
+          = render partial: "dropdown", locals: { f: f }
           %p.help-block
             = link_to "Wildcards", help_page_path(category: 'workflow', file: 'protected_branches', format: 'md', anchor: "wildcard-protected-branches")
             such as
@@ -39,10 +39,3 @@
         = f.submit "Protect", class: "btn-create btn protect-branch-btn", disabled: true
     %hr
     = render "branches_list"
-
-:javascript
-  $("#protected_branch_name").select2({
-    placeholder: "Select branch",
-    createSearchChoice: function(term) { return { id: term, text: term }; },
-    data: gon.open_branches
-  })

spec/features/protected_branches_spec.rb

@@ -7,7 +7,9 @@ feature 'Projected Branches', feature: true, js: true do
   before { login_as(user) }
 
   def set_protected_branch_name(branch_name)
-    page.execute_script("$('#protected_branch_name').val('#{branch_name}')")
+    find(".js-protected-branch-select").click
+    find(".dropdown-input-field").set(branch_name)
+    click_on "Create Protected Branch: #{branch_name}"
   end
 
   describe "explicit protected branches" do