Disable new label form in dropdown until fields are complete

app/assets/javascripts/labels_select.js.coffee

@@ -6,7 +6,7 @@ class @LabelsSelect
       labelUrl = $dropdown.data('labels')
       selectedLabel = $dropdown.data('selected')
       if selectedLabel
-        selectedLabel = selectedLabel.split(',')
+        selectedLabel = selectedLabel.toString().split(',')
       newLabelField = $('#new_label_name')
       newColorField = $('#new_label_color')
       showNo = $dropdown.data('show-no')
@@ -14,24 +14,61 @@ class @LabelsSelect
       defaultLabel = $dropdown.data('default-label')
 
       if newLabelField.length
+        $newLabelCreateButton = $('.js-new-label-btn')
+        $colorPreview = $('.js-dropdown-label-color-preview')
         $newLabelError = $dropdown.parent().find('.js-label-error')
         $newLabelError.hide()
 
+        # Suggested colors in the dropdown to chose from pre-chosen colors
         $('.suggest-colors-dropdown a').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
-          newColorField.val $(this).data('color')
-          $('.js-dropdown-label-color-preview')
+          newColorField
+            .val($(this).data('color'))
+            .trigger('change')
+          $colorPreview
             .css 'background-color', $(this).data('color')
             .parent()
             .addClass 'is-active'
 
+        # Cancel button takes back to first page
+        resetForm = ->
+          newLabelField
+            .val ''
+            .trigger 'change'
+          newColorField
+            .val ''
+            .trigger 'change'
+          $colorPreview
+            .css 'background-color', ''
+            .parent()
+            .removeClass 'is-active'
+
+        $('.dropdown-menu-back').on 'click', ->
+          resetForm()
+
         $('.js-cancel-label-btn').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
+          resetForm()
           $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
 
-        $('.js-new-label-btn').on 'click', (e) ->
+        # Listen for change and keyup events on label and color field
+        # This allows us to enable the button when ready
+        enableLabelCreateButton = ->
+          if newLabelField.val() isnt '' and newColorField.val() isnt ''
+            $newLabelCreateButton.enable()
+          else
+            $newLabelCreateButton.disable()
+
+        newLabelField.on 'keyup change', enableLabelCreateButton
+
+        newColorField.on 'keyup change', enableLabelCreateButton
+
+        # Send the API call to create the label
+        $newLabelCreateButton
+          .disable()
+          .on 'click', (e) ->
             e.preventDefault()
             e.stopPropagation()