diff --git a/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6 b/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
index 2b074994b4ab9029f6e201d7e5981aa3f5556158..9c4a7eabcb661fbb467ccfb8b0794606e38d8404 100644
--- a/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
+++ b/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
@@ -8,31 +8,42 @@
      * temporarily.
      * */
 
-    if ($('.accept-mr-form').length) {
-      $('.accept-mr-form').on('ajax:send', () => {
-        $('.accept-mr-form :input').disable();
-      });
+    $(document)
+    .off('ajax:send', '.accept-mr-form')
+    .on('ajax:send', '.accept-mr-form', () => {
+      $('.accept-mr-form :input').disable();
+    });
 
-      $('.accept_merge_request').on('click', () => {
-        $('.js-merge-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
-      });
+    $(document)
+    .off('click', '.accept_merge_request')
+    .on('click', '.accept_merge_request', () => {
+      $('.js-merge-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
+    });
 
-      $('.merge_when_build_succeeds').on('click', () => {
-        $('#merge_when_build_succeeds').val('1');
-      });
+    $(document)
+    .off('click', '.merge_when_build_succeeds')
+    .on('click', '.merge_when_build_succeeds', () => {
+      $('#merge_when_build_succeeds').val('1');
+    });
 
-      $('.js-merge-dropdown a').on('click', (e) => {
-        e.preventDefault();
-        $(this).closest('form').submit();
-      });
-    } else if ($('.rebase-in-progress').length) {
+    $(document)
+    .off('click', '.js-merge-dropdown a')
+    .on('click', '.js-merge-dropdown a', (e) => {
+      e.preventDefault();
+      $(this).closest('form').submit();
+    });
+    if ($('.rebase-in-progress').length) {
       merge_request_widget.rebaseInProgress();
     } else if ($('.rebase-mr-form').length) {
-      $('.rebase-mr-form').on('ajax:send', () => {
+      $(document)
+      .off('ajax:send', '.rebase-mr-form')
+      .on('ajax:send', '.rebase-mr-form', () => {
         $('.rebase-mr-form :input').disable();
       });
 
-      $('.js-rebase-button').on('click', () => {
+      $(document)
+      .off('click', '.js-rebase-button')
+      .on('click', '.js-rebase-button', () => {
         $('.js-rebase-button').html("<i class='fa fa-spinner fa-spin'></i> Rebase in progress");
       });
     } else {
diff --git a/app/views/projects/merge_requests/widget/open/_merge_when_build_succeeds.html.haml b/app/views/projects/merge_requests/widget/open/_merge_when_build_succeeds.html.haml
index 072d01d144e89eafb05142883d0e6d27f0ee5e45..f70cd09c5f48ed988967019e22bee1be9a78da47 100644
--- a/app/views/projects/merge_requests/widget/open/_merge_when_build_succeeds.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_merge_when_build_succeeds.html.haml
@@ -1,3 +1,6 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('merge_request_widget/ci_bundle.js')
+
 %h4
   Set by #{link_to_member(@project, @merge_request.merge_user, avatar: true)}
   to be merged automatically when the pipeline succeeds.
diff --git a/changelogs/unreleased/fix_auto_merging.yml b/changelogs/unreleased/fix_auto_merging.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2dc23705b5eb0eb2923b9a0bdc1d32b1c4600934
--- /dev/null
+++ b/changelogs/unreleased/fix_auto_merging.yml
@@ -0,0 +1,4 @@
+---
+title: Fix Merge When Pipeline Succeeds immediate merge bug
+merge_request: 8685
+author:
diff --git a/spec/features/merge_requests/merge_when_pipeline_succeeds_spec.rb b/spec/features/merge_requests/merge_when_pipeline_succeeds_spec.rb
index aa24a9050016ca096232142f9d708346b5101ed4..2ea9c317bd1a7737f35f8fa95177d7a072b89955 100644
--- a/spec/features/merge_requests/merge_when_pipeline_succeeds_spec.rb
+++ b/spec/features/merge_requests/merge_when_pipeline_succeeds_spec.rb
@@ -32,19 +32,61 @@ feature 'Merge When Pipeline Succeeds', :feature, :js do
       expect(page).to have_button "Merge When Pipeline Succeeds"
     end
 
-    context "Merge When Pipeline Succeeds enabled" do
-      before do
-        click_button "Merge When Pipeline Succeeds"
+    describe 'enabling Merge When Pipeline Succeeds' do
+      shared_examples 'Merge When Pipeline Succeeds activator' do
+        it 'activates the Merge When Pipeline Succeeds feature' do
+          click_button "Merge When Pipeline Succeeds"
+
+          expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds."
+          expect(page).to have_content "The source branch will not be removed."
+          expect(page).to have_link "Cancel Automatic Merge"
+          visit_merge_request(merge_request) # Needed to refresh the page
+          expect(page).to have_content /enabled an automatic merge when the pipeline for \h{8} succeeds/i
+        end
       end
 
-      it 'activates Merge When Pipeline Succeeds feature' do
-        expect(page).to have_link "Cancel Automatic Merge"
+      context "when enabled immediately" do
+        it_behaves_like 'Merge When Pipeline Succeeds activator'
+      end
+
+      context 'when enabled after pipeline status changed' do
+        before do
+          pipeline.run!
 
-        expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds."
-        expect(page).to have_content "The source branch will not be removed."
+          # We depend on merge request widget being reloaded
+          # so we have to wait for asynchronous call to reload it
+          # and have_content expectation handles that.
+          #
+          expect(page).to have_content "Pipeline ##{pipeline.id} running"
+        end
+
+        it_behaves_like 'Merge When Pipeline Succeeds activator'
+      end
+
+      context 'when enabled after it was previously canceled' do
+        before do
+          click_button "Merge When Pipeline Succeeds"
+          click_link "Cancel Automatic Merge"
+        end
+
+        it_behaves_like 'Merge When Pipeline Succeeds activator'
+      end
 
-        visit_merge_request(merge_request) # Needed to refresh the page
-        expect(page).to have_content /enabled an automatic merge when the pipeline for \h{8} succeeds/i
+      context 'when it was enabled and then canceled' do
+        let(:merge_request) do
+          create(:merge_request_with_diffs,
+                 :merge_when_build_succeeds,
+                   source_project: project,
+                   title: 'Bug NS-04',
+                   author: user,
+                   merge_user: user)
+        end
+
+        before do
+          click_link "Cancel Automatic Merge"
+        end
+
+        it_behaves_like 'Merge When Pipeline Succeeds activator'
       end
     end
   end