Prevent dropdown from closing when user clicks in a build.

1 files changed, 16 insertions, 0 deletions

diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index 2145e531331..483c201305a 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -21,6 +21,8 @@
       this.container = opts.container || '';
       this.dropdownListSelector = '.js-builds-dropdown-container';
       this.getBuildsList = this.getBuildsList.bind(this);
+
+      this.stopDropdownClickPropagation();
     }
 
     /**
@@ -32,6 +34,20 @@
     }
 
     /**
+     * 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() {
+      $(document).on('click', `${this.container} .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item`, (e) => {
+        e.stopPropagation();
+      });
+    }
+
+    /**
      * For the clicked stage, renders the given data in the dropdown list.
      *
      * @param  {HTMLElement} stageContainer