Add multi select stay open functionality

4 files changed, 58 insertions, 31 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index a1a0e1ecb08..3694407c31a 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -129,7 +129,7 @@ class GitLabDropdown
 
     @dropdown.on "shown.bs.dropdown", @opened
     @dropdown.on "hidden.bs.dropdown", @hidden
-    @dropdown.on "click", ".dropdown-menu", @shouldPropagate
+    @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
 
     if @dropdown.find(".dropdown-toggle-page").length
       @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
@@ -181,7 +181,12 @@ class GitLabDropdown
 
   shouldPropagate: (e) =>
     if @options.multiSelect
-      e.stopPropagation()
+      $target = $(e.target)
+      if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon')
+        e.stopPropagation()
+        return false
+      else
+        return true
 
   opened: =>
     contentHtml = $('.dropdown-content', @dropdown).html()
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 0ec92764567..01847ad2c31 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -82,6 +82,23 @@ class @LabelsSelect
         # This allows us to enable the button when ready
         enableLabelCreateButton = ->
           if newLabelField.val() isnt '' and newColorField.val() isnt ''
+            $newLabelError.hide()
+            $('.js-new-label-btn').disable()
+
+            # Create new label with API
+            Api.newLabel projectId, {
+              name: newLabelField.val()
+              color: newColorField.val()
+            }, (label) ->
+              $('.js-new-label-btn').enable()
+
+              if label.message?
+                $newLabelError
+                  .text label.message
+                  .show()
+              else
+                $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
+
             $newLabelCreateButton.enable()
           else
             $newLabelCreateButton.disable()
@@ -115,6 +132,35 @@ class @LabelsSelect
                 else
                   $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
 
+      saveLabelData = ->
+        selected = $dropdown
+          .closest('.selectbox')
+          .find("input[name='#{$dropdown.data('field-name')}']")
+          .map(->
+            @value
+          ).get()
+        data = {}
+        data[abilityName] = {}
+        data[abilityName].label_ids = selected
+        if not selected.length
+          data[abilityName].label_ids = ['']
+        $loading.fadeIn()
+        $.ajax(
+          type: 'PUT'
+          url: issueURL
+          data: data
+        ).done (data) ->
+          $loading.fadeOut()
+          $selectbox.hide()
+          if not data.labels.length
+            template = labelNoneHTMLTemplate()
+          else
+            template = labelHTMLTemplate(data)
+          href = $value
+                  .show()
+                  .html(template)
+>>>>>>> Add multi select stay open functionality
+
       $dropdown.glDropdown(
         data: (term, callback) ->
           $.ajax(
@@ -190,31 +236,8 @@ class @LabelsSelect
           else if $dropdown.hasClass 'js-filter-submit'
             $dropdown.closest('form').submit()
           else
-            selected = $dropdown
-              .closest('.selectbox')
-              .find("input[name='#{$dropdown.data('field-name')}']")
-              .map(->
-                @value
-              ).get()
-            console.log 'selected', selected
-            data = {}
-            data[abilityName] = {}
-            data[abilityName].label_ids = selected
-            if not selected.length
-              data[abilityName].label_ids = ['']
-            $loading.fadeIn()
-            $.ajax(
-              type: 'PUT'
-              url: issueURL
-              data: data
-            ).done (data) ->
-              $loading.fadeOut()
-              $selectbox.hide()
-              if not data.labels.length
-                template = labelNoneHTMLTemplate()
-              else
-                template = labelHTMLTemplate(data)
-              href = $value
-                      .show()
-                      .html(template)
+            if $dropdown.hasClass 'js-multiselect'
+              return
+            else
+              saveLabelData()
       )
diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee
index 057ad954346..d0e408325b4 100644
--- a/app/assets/javascripts/users_select.js.coffee
+++ b/app/assets/javascripts/users_select.js.coffee
@@ -90,7 +90,6 @@ class @UsersSelect
             data = {}
             data[abilityName] = {}
             data[abilityName].assignee_id = selected
-            console.log 'data',data
             $loading
               .fadeIn()
             $.ajax(
diff --git a/app/helpers/dropdowns_helper.rb b/app/helpers/dropdowns_helper.rb
index 316a10b7da3..14697f774cc 100644
--- a/app/helpers/dropdowns_helper.rb
+++ b/app/helpers/dropdowns_helper.rb
@@ -60,7 +60,7 @@ module DropdownsHelper
       title_output << content_tag(:span, title)
 
       title_output << content_tag(:button, class: "dropdown-title-button dropdown-menu-close", aria: { label: "Close" }, type: "button") do
-        icon('times')
+        icon('times', class: 'dropdown-menu-close-icon')
       end
 
       title_output.html_safe