Merge branch '27530-fix-job-dropdown-pipeline-console-error' into 'master'

fixes job dropdown action button error

Closes #27530

See merge request !9182

app/assets/javascripts/vue_pipelines_index/stage.js.es6

@@ -23,6 +23,13 @@
         required: true,
       },
     },
+
+    updated() {
+      if (this.builds) {
+        this.stopDropdownClickPropagation();
+      }
+    },
+
     methods: {
       fetchBuilds(e) {
         const areaExpanded = e.currentTarget.attributes['aria-expanded'];
@@ -37,17 +44,19 @@
             return flash;
           });
       },
-      keepGraph(e) {
-        const { target } = e;
-
-        if (target.className.indexOf('js-ci-action-icon') >= 0) return null;
-
-        if (
-          target.parentElement &&
-          (target.parentElement.className.indexOf('js-ci-action-icon') >= 0)
-        ) return null;
 
-        return e.stopPropagation();
+      /**
+       * 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: {
@@ -76,13 +85,13 @@
     template: `
       <div>
         <button
-          @click='fetchBuilds($event)'
+          @click="fetchBuilds($event)"
           :class="triggerButtonClass"
-          :title='stage.title'
+          :title="stage.title"
           data-placement="top"
           data-toggle="dropdown"
           type="button"
-          :aria-label='stage.title'
+          :aria-label="stage.title"
         >
           <span v-html="svg" aria-hidden="true"></span>
           <i class="fa fa-caret-down" aria-hidden="true"></i>
@@ -90,7 +99,6 @@
         <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
           <div class="arrow-up" aria-hidden="true"></div>
           <div
-            @click='keepGraph($event)'
             :class="dropdownClass"
             class="js-builds-dropdown-list scrollable-menu"
             v-html="buildsOrSpinner"

changelogs/unreleased/27530-fix-job-dropdown-pipeline-console-error.yml

+---
+title: Fixes job dropdown action throws error in js console
+merge_request: 9182
+author:

spec/features/projects/pipelines/pipelines_spec.rb

@@ -328,6 +328,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