Fixes label when unselecting an item from dropdown list

49e91c07 · Alfredo Sumaran · 9bbbad6c · 49e91c07 · 49e91c07
--- 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)->

--- 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')