Merge branch '31271-fixmr-target-branch-selector-dropdown' into 'master'

Fix MR target branch select dropdown placement cut-off

Closes #31271

See merge request !10902

2 files changed, 40 insertions, 0 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 7e469153106..b87c57c38fe 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -50,6 +50,7 @@ import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 import ShortcutsWiki from './shortcuts_wiki';
 import BlobViewer from './blob/viewer/index';
+import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -198,6 +199,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new LabelsSelect();
           new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
+          new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
           break;
         case 'projects:tags:new':
           new ZenMode();
diff --git a/app/assets/javascripts/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
new file mode 100644
index 00000000000..2203a56315e
--- /dev/null
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@@ -0,0 +1,38 @@
+let instanceCount = 0;
+
+class AutoWidthDropdownSelect {
+  constructor(selectElement) {
+    this.$selectElement = $(selectElement);
+    this.dropdownClass = `js-auto-width-select-dropdown-${instanceCount}`;
+    instanceCount += 1;
+  }
+
+  init() {
+    const dropdownClass = this.dropdownClass;
+    this.$selectElement.select2({
+      dropdownCssClass: dropdownClass,
+      dropdownCss() {
+        let resultantWidth = 'auto';
+        const $dropdown = $(`.${dropdownClass}`);
+
+        // We have to look at the parent because
+        // `offsetParent` on a `display: none;` is `null`
+        const offsetParentWidth = $(this).parent().offsetParent().width();
+        // Reset any width to let it naturally flow
+        $dropdown.css('width', 'auto');
+        if ($dropdown.outerWidth(false) > offsetParentWidth) {
+          resultantWidth = offsetParentWidth;
+        }
+
+        return {
+          width: resultantWidth,
+          maxWidth: offsetParentWidth,
+        };
+      },
+    });
+
+    return this;
+  }
+}
+
+export default AutoWidthDropdownSelect;