Auto close cloned dropdowns for ci variable list

The flow around Bootstrap v4 dropdown and glDropdown changed which resulted in new variable rows to having a blank dropdown open,

 - With BS3: opened dropdown -> clone and insert new row -> hide old dropdown -> hide new dropdown
 - With BS4: opened dropdown -> clone and insert new row -> hide old dropdown

We are fixing this by cleaning up the dirty row clone  class so we don't have to rely on magic events hiding both the old and new dropdowns

1 files changed, 5 insertions, 0 deletions

diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
index e177a3bfdc7..e3391cbca64 100644
--- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
@@ -141,6 +141,11 @@ export default class VariableList {
       $rowClone.find(entry.selector).val(entry.default);
     });
 
+    // Close any dropdowns
+    $rowClone.find('.show').each((index, $dropdown) => {
+      $dropdown.classList.remove('show');
+    });
+
     this.initRow($rowClone);
 
     $row.after($rowClone);