Updated issuable form weight dropdown

app/assets/javascripts/dispatcher.js.es6

@@ -67,6 +67,7 @@
           new IssuableForm($('.issue-form'));
           new LabelsSelect();
           new MilestoneSelect();
+          new WeightSelect();
           new gl.IssuableTemplateSelectors();
           break;
         case 'projects:merge_requests:new':

app/assets/javascripts/weight_select.js

@@ -39,6 +39,10 @@
         return $dropdown.glDropdown({
           selectable: true,
           fieldName: $dropdown.data("field-name"),
+          showMenuAbove: true,
+          toggleLabel: function (selected, el) {
+            return $(el).data("id");
+          },
           hidden: function(e) {
             $selectbox.hide();
             return $value.css('display', '');
@@ -46,11 +50,15 @@
           id: function(obj, el) {
             if ($(el).data("none") == null) {
               return $(el).data("id");
+            } else {
+              return '';
             }
           },
-          clicked: function(selected) {
+          clicked: function(selected, $el, e) {
             if ($(dropdown).is(".js-filter-submit")) {
               return $(dropdown).parents('form').submit();
+            } else if ($(dropdown).is('.js-issuable-form-weight')) {
+              e.preventDefault();
             } else {
               selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
               return updateWeight(selected);

app/views/shared/issuable/_form.html.haml

@@ -103,12 +103,23 @@
             = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false, show_menu_above: 'true' }, dropdown_title: "Select label"
 
       - if issuable.respond_to?(:weight)
+        - weight_options = Issue.weight_options
+        - weight_options.delete(Issue::WEIGHT_ALL)
+        - weight_options.delete(Issue::WEIGHT_ANY)
         .form-group
           = f.label :label_ids, class: "control-label #{"col-lg-4" if has_due_date}" do
             Weight
           .col-sm-10{ class: ("col-lg-8" if has_due_date) }
-            = f.select :weight, issues_weight_options(issuable.weight, edit: true), { include_blank: true },
-              { class: 'select2 js-select2', data: { placeholder: "Select weight" }}
+            .issuable-form-select-holder
+              - if issuable.weight
+                = f.hidden_field :weight
+              = dropdown_tag(issuable.weight || "Weight", options: { title: "Select weight", toggle_class: 'js-weight-select js-issuable-form-weight', dropdown_class: "dropdown-menu-selectable dropdown-menu-weight",
+                placeholder: "Search weight", data: { field_name: "#{issuable.class.model_name.param_key}[weight]" , default_label: "Weight" } }) do
+                %ul
+                  - weight_options.each do |weight|
+                    %li
+                      %a{href: "#", data: { id: weight, none: weight === Issue::WEIGHT_NONE }, class: ("is-active" if issuable.weight == weight)}
+                        = weight
 
     - if has_due_date
       .col-lg-6

spec/features/issues/form_spec.rb

@@ -51,6 +51,12 @@ describe 'New/edit issue', feature: true, js: true do
       expect(page.all('input[name="issue[label_ids][]"]', visible: false)[1].value).to match(label.id.to_s)
       expect(page.all('input[name="issue[label_ids][]"]', visible: false)[2].value).to match(label2.id.to_s)
 
+      click_button 'Weight'
+
+      page.within '.dropdown-menu-weight' do
+        click_link '1'
+      end
+
       click_button 'Submit issue'
 
       page.within '.issuable-sidebar' do
@@ -66,6 +72,10 @@ describe 'New/edit issue', feature: true, js: true do
           expect(page).to have_content label.title
           expect(page).to have_content label2.title
         end
+
+        page.within '.weight' do
+          expect(page).to have_content '1'
+        end
       end
     end
   end