Improved performance of merge requests target branch dropdown

app/assets/javascripts/dispatcher.js

@@ -30,7 +30,6 @@ import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import UserCallout from './user_callout';
 import ShortcutsWiki from './shortcuts_wiki';
 import BlobViewer from './blob/viewer/index';
-import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import GfmAutoComplete from './gfm_auto_complete';
 import Star from './star';
@@ -253,7 +252,6 @@ import { fetchCommitMergeRequests } from './commit_merge_requests';
           new LabelsSelect();
           new MilestoneSelect();
           new IssuableTemplateSelectors();
-          new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
           break;
         case 'projects:tags:new':
           import('./pages/projects/tags/new')

app/assets/javascripts/issuable_form.js

@@ -46,6 +46,12 @@ export default class IssuableForm {
       });
       calendar.setDate(parsePikadayDate($issuableDueDate.val()));
     }
+
+    this.$targetBranchSelect = $('.js-target-branch-select', this.form);
+
+    if (this.$targetBranchSelect.length) {
+      this.initTargetBranchDropdown();
+    }
   }
 
   initAutosave() {
@@ -104,4 +110,52 @@ export default class IssuableForm {
   addWip() {
     this.titleField.val(`WIP: ${(this.titleField.val())}`);
   }
+
+  initTargetBranchDropdown() {
+    this.$targetBranchSelect.select2({
+      ajax: {
+        url: this.$targetBranchSelect.data('endpoint'),
+        dataType: 'JSON',
+        quietMillis: 250,
+        data(search) {
+          return {
+            search,
+          };
+        },
+        results(data) {
+          return {
+            results: data[Object.keys(data)[0]].map(name => ({
+              id: name,
+              text: name,
+            })),
+          };
+        }
+      },
+      initSelection(el, callback) {
+        const val = el.val();
+
+        callback({
+          id: val,
+          text: val,
+        });
+      },
+      dropdownCss: () => {
+        let resultantWidth = 'auto';
+
+        // We have to look at the parent because
+        // `offsetParent` on a `display: none;` is `null`
+        const offsetParentWidth = this.$targetBranchSelect.parent().offsetParent().width();
+        // Reset any width to let it naturally flow
+        this.$targetBranchSelect.css('width', 'auto');
+        if (this.$targetBranchSelect.outerWidth(false) > offsetParentWidth) {
+          resultantWidth = offsetParentWidth;
+        }
+
+        return {
+          width: resultantWidth,
+          maxWidth: offsetParentWidth,
+        };
+      },
+    });
+  }
 }

app/views/shared/issuable/form/_branch_chooser.html.haml

@@ -15,11 +15,10 @@
   = form.label :target_branch, class: 'control-label'
   .col-sm-10.target-branch-select-dropdown-container
     .issuable-form-select-holder
-      = form.select(:target_branch, issuable.target_branches,
-        { include_blank: true },
+      = form.hidden_field(:target_branch,
         { class: 'target_branch js-target-branch-select ref-name',
           disabled: issuable.new_record?,
-          data: { placeholder: "Select branch" }})
+          data: { placeholder: "Select branch", endpoint: refs_project_path(@project, sort: 'updated_desc') }})
     - if issuable.new_record?
        
       = link_to 'Change branches', mr_change_branches_path(issuable)

changelogs/unreleased/merge-request-target-branch-perf.yml

+---
+title: Improve performance of target branch dropdown
+merge_request:
+author:
+type: performance