Merge branch 'fix-empty-dropdown' into 'master'

Fix empty dropdown

Deselecting the current selected option on a dropdown they were removing the input related to them.
This led to a unexpected cases. The forms were submitted without all required inputs and the label was still indicating an option was selected. This MR fixes that.

See merge request !5927

app/assets/javascripts/protected_branch_access_dropdown.js.es6

@@ -10,8 +10,12 @@
         selectable: true,
         inputId: $dropdown.data('input-id'),
         fieldName: $dropdown.data('field-name'),
-        toggleLabel(item) {
-          return item.text;
+        toggleLabel(item, el) {
+          if (el.is('.is-active')) {
+            return item.text;
+          } else {
+            return 'Select';
+          }
         },
         clicked(item, $el, e) {
           e.preventDefault();

app/assets/javascripts/protected_branch_create.js.es6

@@ -47,9 +47,7 @@
       const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
       const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
 
-      if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){
-        this.$form.find('input[type="submit"]').removeAttr('disabled');
-      }
+      this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
     }
   }
 

app/assets/javascripts/protected_branch_edit.js.es6

@@ -31,6 +31,9 @@
       const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
       const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
 
+      // Do not update if one dropdown has not selected any option
+      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return; 
+
       $.ajax({
         type: 'POST',
         url: this.$wrap.data('url'),

app/views/projects/protected_branches/_create_protected_branch.html.haml

@@ -25,6 +25,7 @@
             .merge_access_levels-container
               = dropdown_tag('Select',
                              options: { toggle_class: 'js-allowed-to-merge wide',
+                             dropdown_class: 'dropdown-menu-selectable',
                              data: { field_name: 'protected_branch[merge_access_levels_attributes][0][access_level]', input_id: 'merge_access_levels_attributes' }})
         .form-group
           %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
@@ -33,6 +34,7 @@
             .push_access_levels-container
               = dropdown_tag('Select',
                              options: { toggle_class: 'js-allowed-to-push wide',
+                             dropdown_class: 'dropdown-menu-selectable',
                              data: { field_name: 'protected_branch[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes' }})
 
     .panel-footer