only search branches

target branch select dropdown doesnt care about tags so we dont need to waste time searching them

app/assets/javascripts/issuable/auto_width_dropdown_select.js

@@ -11,6 +11,14 @@ class AutoWidthDropdownSelect {
     const dropdownClass = this.dropdownClass;
     this.$selectElement.select2({
       dropdownCssClass: dropdownClass,
+      ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
+    });
+
+    return this;
+  }
+
+  static selectOptions(dropdownClass) {
+    return {
       dropdownCss() {
         let resultantWidth = 'auto';
         const $dropdown = $(`.${dropdownClass}`);
@@ -29,9 +37,7 @@ class AutoWidthDropdownSelect {
           maxWidth: offsetParentWidth,
         };
       },
-    });
-
-    return this;
+    };
   }
 }
 

app/assets/javascripts/issuable_form.js

@@ -6,6 +6,7 @@ import Autosave from './autosave';
 import UsersSelect from './users_select';
 import GfmAutoComplete from './gfm_auto_complete';
 import ZenMode from './zen_mode';
+import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
 
 export default class IssuableForm {
@@ -113,6 +114,7 @@ export default class IssuableForm {
 
   initTargetBranchDropdown() {
     this.$targetBranchSelect.select2({
+      ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
       ajax: {
         url: this.$targetBranchSelect.data('endpoint'),
         dataType: 'JSON',
@@ -124,6 +126,7 @@ export default class IssuableForm {
         },
         results(data) {
           return {
+            // `data` keys are translated so we can't just access them with a string based key
             results: data[Object.keys(data)[0]].map(name => ({
               id: name,
               text: name,
@@ -139,23 +142,6 @@ export default class IssuableForm {
           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

@@ -18,7 +18,7 @@
       = form.hidden_field(:target_branch,
         { class: 'target_branch js-target-branch-select ref-name',
           disabled: issuable.new_record?,
-          data: { placeholder: "Select branch", endpoint: refs_project_path(@project, sort: 'updated_desc') }})
+          data: { placeholder: "Select branch", endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }})
     - if issuable.new_record?
        
       = link_to 'Change branches', mr_change_branches_path(issuable)