Fixes label when unselecting an item from dropdown listas-new-issuable-form-fixes

2 files changed, 54 insertions, 16 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 1b0d0db8954..dc1ac00c3c9 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -511,9 +511,6 @@ class GitLabDropdown
       # Toggle active class for the tick mark
       el.addClass ACTIVE_CLASS
 
-      # Toggle the dropdown label
-      if @options.toggleLabel
-        @updateLabel(selectedObject, el, @)
       if value?
         if !field.length and fieldName
           @addInput(fieldName, value)
@@ -522,6 +519,10 @@ class GitLabDropdown
             .val value
             .trigger 'change'
 
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        @updateLabel(selectedObject, el, @)
+
       return selectedObject
 
   addInput: (fieldName, value)->
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 1a802b81452..896a0b37401 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -272,21 +272,58 @@ class @LabelsSelect
           fields: ['title']
         selectable: true
         filterable: true
-        toggleLabel: (selected, el) ->
-          selected_labels = $('.js-label-select').siblings('.dropdown-menu-labels').find('.is-active')
-
-          if selected and selected.title?
-            if selected_labels.length > 1
-              "#{selected.title} +#{selected_labels.length - 1} more"
+        toggleLabel: (selected, $el, glDropdownInstance) ->
+          # When comes from a triggered event handle it VERY differently
+          if selected instanceof jQuery.Event
+            $dropdownParent = $dropdown.closest '.labels-filter'
+            $labelInputs = $dropdownParent.find "input[name='#{@fieldName}']"
+            numberSelectedLabels = $labelInputs.length
+            firstLabel = _.pluck($labelInputs, 'value')[0]
+
+            # We are removing a label
+            if numberSelectedLabels is 1
+                firstLabel
+            else if numberSelectedLabels > 1
+              "#{firstLabel} +#{numberSelectedLabels - 1} more"
             else
-              selected.title
-          else if not selected and selected_labels.length isnt 0
-            if selected_labels.length > 1
-              "#{$(selected_labels[0]).text()} +#{selected_labels.length - 1} more"
-            else if selected_labels.length is 1
-              $(selected_labels).text()
+              defaultLabel
+          # when clicking on a dropdown option
           else
-            defaultLabel
+            if glDropdownInstance?
+              $dropdownParent = glDropdownInstance.dropdown.closest '.issuable-form-select-holder, .labels-filter'
+            else
+              $dropdownParent = $()
+
+            $labelInputs = $dropdownParent.find "input[name='#{@fieldName}']"
+
+            # Find the label by its attribute according the dropdown settings
+            if $dropdown.hasClass 'js-issuable-form-dropdown'
+              # When settings labels to a issuable we find the label for its ID
+              whereQuery = { id: parseInt $labelInputs.first().val() }
+            else
+              # When filtering issuables we find the label for its title
+              whereQuery = { title: $labelInputs.first().val() }
+
+            firstLabel = _.findWhere glDropdownInstance.fullData, whereQuery
+
+            # Better rely on inputs since when filtering returns invalid number of active labels
+            numberSelectedLabels = $labelInputs.length
+
+            # If we are adding a label
+            if $el.is '.is-active'
+              if numberSelectedLabels is 1
+                selected.title
+              else
+                "#{selected.title} +#{numberSelectedLabels - 1} more"
+
+            # else we are removing a label
+            else
+              if numberSelectedLabels is 1
+                firstLabel.title
+              else if numberSelectedLabels > 1
+                "#{firstLabel.title} +#{numberSelectedLabels - 1} more"
+              else
+                defaultLabel
         fieldName: $dropdown.data('field-name')
         id: (label) ->
           if $dropdown.hasClass('js-issuable-form-dropdown')