Guatantee we don't open a blank dropdown

4 files changed, 13 insertions, 5 deletions

diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index 5036187d5c2..64c1447f427 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -93,7 +93,9 @@ export default class MiniPipelineGraph {
       },
       error: () => {
         this.toggleLoading(button);
-        $(button).dropdown('toggle');
+        if ($(button).parent().hasClass('open')) {
+          $(button).dropdown('toggle');
+        }
         new Flash('An error occurred while fetching the builds.', 'alert');
       },
     });
diff --git a/app/assets/javascripts/pipelines/components/stage.js b/app/assets/javascripts/pipelines/components/stage.js
index 21f68fc6f89..203485f2990 100644
--- a/app/assets/javascripts/pipelines/components/stage.js
+++ b/app/assets/javascripts/pipelines/components/stage.js
@@ -33,7 +33,11 @@ export default {
           this.builds = JSON.parse(response.body).html;
         })
         .catch(() => {
-          $(this.$refs.dropdown).dropdown('toggle');
+          // If dropdown is opened we'll close it.
+          if (this.$el.classList.contains('open')) {
+            $(this.$refs.dropdown).dropdown('toggle');
+          }
+
           const flash = new Flash('Something went wrong on our end.');
           return flash;
         });
@@ -94,7 +98,9 @@ export default {
           class="fa fa-caret-down"
           aria-hidden="true" />
       </button>
-      <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
+      <ul
+        ref="dropdown-content"
+        class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
         <div
           class="arrow-up"
           aria-hidden="true"></div>
diff --git a/spec/javascripts/mini_pipeline_graph_dropdown_spec.js b/spec/javascripts/mini_pipeline_graph_dropdown_spec.js
index e8d4d129e06..51aac90ed05 100644
--- a/spec/javascripts/mini_pipeline_graph_dropdown_spec.js
+++ b/spec/javascripts/mini_pipeline_graph_dropdown_spec.js
@@ -79,7 +79,7 @@ describe('Mini Pipeline Graph Dropdown', () => {
     document.querySelector('.js-builds-dropdown-button').click();
 
     setTimeout(() => {
-      expect($('.js-builds-dropdown-container').is('visible')).toEqual(false);
+      expect($('.js-builds-dropdown-container').parent().hasClass('open')).toEqual(false);
       done();
     }, 0);
   });
diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js
index 6f9e4c4f704..72ba257829e 100644
--- a/spec/javascripts/pipelines/stage_spec.js
+++ b/spec/javascripts/pipelines/stage_spec.js
@@ -74,7 +74,7 @@ describe('Pipelines Stage', () => {
       });
 
       expect(
-        $(component.$el, '.js-builds-dropdown-container').is('visible'),
+        component.$el.classList.contains('open'),
       ).toEqual(false);
     });
   });