Correctly handles multi-selected values

Fixes an issue where values couldnlt be unselected

2 files changed, 40 insertions, 19 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 420f67ef19e..8e1449bc59c 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -39,7 +39,7 @@ class GitLabDropdownFilter
         key: @options.keys
       )
 
-    @callback results
+    @options.callback results
 
 class GitLabDropdownRemote
   constructor: (@dataEndpoint, @options) ->
@@ -75,6 +75,7 @@ class GitLabDropdownRemote
 class GitLabDropdown
   LOADING_CLASS = "is-loading"
   PAGE_TWO_CLASS = "is-page-two"
+  ACTIVE_CLASS = "is-active"
 
   constructor: (@el, @options) ->
     self = @
@@ -226,24 +227,35 @@ class GitLabDropdown
 
   rowClicked: (el) ->
     fieldName = @options.fieldName
-    selectedIndex = el.parent().index()
-    if @renderedData
-      selectedObject = @renderedData[selectedIndex]
-    value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
+    field = @dropdown.parent().find("input[name='#{fieldName}']")
 
-    if @options.multiSelect
-      fieldName = "#{fieldName}[]"
+    if el.hasClass(ACTIVE_CLASS)
+      field.remove()
     else
-      @dropdown.find('.is-active').removeClass 'is-active'
-      @dropdown.parent().find("input[name='#{fieldName}']").remove()
-
-    # Toggle active class for the tick mark
-    el.toggleClass "is-active"
-
-    if value
-      # Create hidden input for form
-      input = "<input type='hidden' name='#{fieldName}' value='#{value}' />"
-      @dropdown.before input
+      fieldName = @options.fieldName
+      selectedIndex = el.parent().index()
+      if @renderedData
+        selectedObject = @renderedData[selectedIndex]
+      value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
+
+      if @options.multiSelect
+        oldValue = field.val()
+        if oldValue
+          value = "#{oldValue},#{value}"
+      else
+        @dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS
+        field.remove()
+
+      # Toggle active class for the tick mark
+      el.toggleClass "is-active"
+
+      if value
+        if !field.length
+          # Create hidden input for form
+          input = "<input type='hidden' name='#{fieldName}' />"
+          @dropdown.before input
+
+        @dropdown.parent().find("input[name='#{fieldName}']").val value
 
   selectFirstRow: ->
     selector = '.dropdown-content li:first-child a'
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index b4708f6537a..5ade2cb66cb 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -4,6 +4,8 @@ class @LabelsSelect
       projectId = $(dropdown).data('project-id')
       labelUrl = $(dropdown).data("labels")
       selectedLabel = $(dropdown).data('selected')
+      if selectedLabel
+        selectedLabel = selectedLabel.split(",")
       newLabelField = $('#new_label_name')
       newColorField = $('#new_label_color')
       showNo = $(dropdown).data('show-no')
@@ -60,10 +62,17 @@ class @LabelsSelect
 
             if data.length > 2
               data.splice 2, 0, "divider"
-              
+
             callback data
         renderRow: (label) ->
-          selected = if label.title is selectedLabel then "is-active" else ""
+          if $.isArray(selectedLabel)
+            selected = ""
+            $.each selectedLabel, (i, selectedLbl) ->
+              selectedLbl = selectedLbl.trim()
+              if selected is "" && label.title is selectedLbl
+                selected = "is-active"
+          else
+            selected = if label.title is selectedLabel then "is-active" else ""
 
           "<li>
             <a href='#' class='#{selected}'>