Prevent propagation of click even in job name inside dropdown.27530-fix-job-dropdown-pipeline-console-error

2 files changed, 32 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 7082df2fcea..67fdd729e41 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -23,19 +23,13 @@
         required: true,
       },
     },
-    mounted() {
-      /**
-       * When the user right clicks or cmd/ctrl + click in the job name or action icon,
-       * the dropdown should not be closed and the link should open in another tab.
-       * If the target is a svg we stop propagation in order to prevent
-       * the default behavior of the dropdown.
-       */
-      console.log('I am called');
-      $('.js-builds-dropdown-list').on('click', (e) => {
-        console.log('i am in event');
-        e.stopPropagation();
-      });
+
+    updated() {
+      if (this.builds) {
+        this.stopDropdownClickPropagation();
+      }
     },
+
     methods: {
       fetchBuilds(e) {
         const areaExpanded = e.currentTarget.attributes['aria-expanded'];
@@ -50,6 +44,20 @@
             return flash;
           });
       },
+
+      /**
+       * When the user right clicks or cmd/ctrl + click in the job name
+       * the dropdown should not be closed and the link should open in another tab,
+       * so we stop propagation of the click event inside the dropdown.
+       *
+       * Since this component is rendered multiple times per page we need to guarantee we only
+       * target the click event of this component.
+       */
+      stopDropdownClickPropagation() {
+        $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')).on('click', (e) => {
+          e.stopPropagation();
+        });
+      },
     },
     computed: {
       buildsOrSpinner() {
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 8d1214dedb4..b412ef920c5 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -284,6 +284,18 @@ describe 'Pipelines', :feature, :js do
             expect(build.reload).to be_canceled
           end
         end
+
+        context 'dropdown jobs list' do
+          it 'should keep the dropdown open when the user ctr/cmd + clicks in the job name' do
+            find('.js-builds-dropdown-button').trigger('click')
+
+            execute_script('var e = $.Event("keydown", { keyCode: 64 }); $("body").trigger(e);')
+
+            find('.mini-pipeline-graph-dropdown-item').trigger('click')
+
+            expect(page).to have_selector('.js-ci-action-icon')
+          end
+        end
       end
 
       context 'with pagination' do