diff --git a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
index ec21d8c84e0f14bf830fd006fd599b27e4ae1284..6c481beefe17ec4d84495fa087fe0711024da637 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
@@ -1,5 +1,72 @@
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+
+import { GitLabDropdown } from '~/deprecated_jquery_dropdown/gl_dropdown';
+
 import initMergeRequest from '~/pages/projects/merge_requests/init_merge_request';
 import initCheckFormState from './check_form_state';
 
+function initTargetBranchSelector() {
+  const targetBranch = document.querySelector('.js-target-branch');
+  const { selected, fieldName, refsUrl } = targetBranch?.dataset ?? {};
+  const formField = document.querySelector(`input[name="${fieldName}"]`);
+
+  if (targetBranch && refsUrl && formField) {
+    /* eslint-disable-next-line no-new */
+    new GitLabDropdown(targetBranch, {
+      selectable: true,
+      filterable: true,
+      filterRemote: Boolean(refsUrl),
+      filterInput: 'input[type="search"]',
+      data(term, callback) {
+        const params = {
+          search: term,
+        };
+
+        axios
+          .get(refsUrl, {
+            params,
+          })
+          .then(({ data }) => {
+            callback(data);
+          })
+          .catch(() =>
+            createFlash({
+              message: __('Error fetching branches'),
+            }),
+          );
+      },
+      renderRow(branch) {
+        const item = document.createElement('li');
+        const link = document.createElement('a');
+
+        link.setAttribute('href', '#');
+        link.dataset.branch = branch;
+        link.classList.toggle('is-active', branch === selected);
+        link.textContent = branch;
+
+        item.appendChild(link);
+
+        return item;
+      },
+      id(obj, $el) {
+        return $el.data('id');
+      },
+      toggleLabel(obj, $el) {
+        return $el.text().trim();
+      },
+      clicked({ $el, e }) {
+        e.preventDefault();
+
+        const branchName = $el[0].dataset.branch;
+
+        formField.setAttribute('value', branchName);
+      },
+    });
+  }
+}
+
 initMergeRequest();
 initCheckFormState();
+initTargetBranchSelector();
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 8ab002f755f56f47dbf5d11166689128ae57ad50..634e927f891f0100aba949a857fc7b0283183fdc 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -31,10 +31,14 @@
     - if issuable.merged?
       %code= target_title
   - unless issuable.new_record? || issuable.merged?
-    %span.dropdown.gl-ml-2.d-inline-block
-      = form.hidden_field(:target_branch,
-        { class: 'target_branch js-target-branch-select ref-name mw-xl',
-          data: { placeholder: _('Select branch'), endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }})
+    .merge-request-select.dropdown.gl-w-auto
+      = form.hidden_field :target_branch
+      = dropdown_toggle form.object.target_branch.presence || _("Select branch"), { toggle: "dropdown", 'field-name': "#{form.object_name}[target_branch]", 'refs-url': refs_project_path(@project, sort: 'updated_desc', find: 'branches'), selected: form.object.target_branch, default_text: _("Select branch") }, { toggle_class: "js-compare-dropdown js-target-branch monospace" }
+      .dropdown-menu.dropdown-menu-selectable.js-target-branch-dropdown.target_branch.ref-name.git-revision-dropdown
+        = dropdown_title(_("Select branch"))
+        = dropdown_filter(_("Search branches"))
+        = dropdown_content
+        = dropdown_loading
 
 - if source_level < target_level
   = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0742b7bba2bdea7c0d88ce3293dc80bc591f96ba..781deb2cdfa66458bfa91b7e0e81817238ae8aa7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -15126,6 +15126,9 @@ msgstr ""
 msgid "Error deleting project. Check logs for error details."
 msgstr ""
 
+msgid "Error fetching branches"
+msgstr ""
+
 msgid "Error fetching burnup chart data"
 msgstr ""
 
diff --git a/spec/features/merge_request/user_edits_merge_request_spec.rb b/spec/features/merge_request/user_edits_merge_request_spec.rb
index 0b4b9d7452ad3b010fb3ced1d789a730bd01cfe9..4ac25ea7ae01b0fb5ecbfac7d5aabb030acdb1bc 100644
--- a/spec/features/merge_request/user_edits_merge_request_spec.rb
+++ b/spec/features/merge_request/user_edits_merge_request_spec.rb
@@ -3,8 +3,6 @@
 require 'spec_helper'
 
 RSpec.describe 'User edits a merge request', :js do
-  include Select2Helper
-
   let(:project) { create(:project, :repository) }
   let(:merge_request) { create(:merge_request, source_project: project, target_project: project) }
   let(:user) { create(:user) }
@@ -89,7 +87,12 @@
     it 'allows user to change target branch' do
       expect(page).to have_content('From master into feature')
 
-      select2('merge-test', from: '#merge_request_target_branch')
+      first('.js-target-branch').click
+
+      wait_for_requests
+
+      first('.js-target-branch-dropdown a', text: 'merge-test').click
+
       click_button('Save changes')
 
       expect(page).to have_content("requested to merge #{merge_request.source_branch} into merge-test")
@@ -101,7 +104,7 @@
 
       it 'does not allow user to change target branch' do
         expect(page).to have_content('From master into feature')
-        expect(page).not_to have_selector('.select2-container')
+        expect(page).not_to have_selector('.js-target-branch.js-compare-dropdown')
       end
     end
   end