Fix dropdown behavior for repository filters [SCI-6491] (#3842)

Co-authored-by: Anton <anton@scinote.net>

app/javascript/packs/vue/repository_filter.js

@@ -75,7 +75,8 @@ window.initRepositoryFilter = () => {
   const repositoryFilterContainer = new Vue({
     el: '#filterContainer',
     data: () => ({
-      filters: DEFAULT_FILTERS,
+      filters: [],
+      defaultFilters: DEFAULT_FILTERS,
       columns: [],
       my_modules: [],
       canManageFilters: $('#filterContainer').data('can-manage-filters'),
@@ -121,7 +122,6 @@ window.initRepositoryFilter = () => {
         $('#modalSaveRepositoryTableFilter').data('repositoryTableFilterId', null);
         $('#saveRepositoryFilters').addClass('hidden');
         $('#overwriteFilterLink').addClass('hidden');
-        this.reloadDataTable();
       },
       reloadDataTable() {
         this.dataTableElement.DataTable().ajax.reload();
@@ -150,5 +150,9 @@ window.initRepositoryFilter = () => {
     e.stopPropagation();
   });
 
+  $('#filtersDropdownButton').on('show.bs.dropdown', () => {
+    $('#filtersColumnsDropdown, #savedFiltersContainer').removeClass('open');
+  });
+
   window.repositoryFilterObject = repositoryFilterContainer;
 };

app/javascript/vue/repository_filter/container.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="filters-container">
+  <div class="filters-container" @click="closeDropdowns">
     <div class="header">
       <div id="savedFiltersContainer" class="dropdown saved-filters-container" @click="toggleSavedFilters">
         <div class="title" id="savedFilterDropdown">
@@ -65,7 +65,7 @@
   export default {
     name: 'FilterContainer',
     props: {
-      filters: Array,
+      defaultFilters: Array,
       my_modules: Array,
       container: Object,
       columns: Array,
@@ -73,6 +73,11 @@
       canManageFilters: Boolean,
       filterName: String, default: () => null
     },
+    data() {
+      return {
+        filters: this.defaultFilters
+      }
+    },
     components: { ColumnElement, FilterElement, SavedFilterElement },
     methods: {
       addFilter(column) {
@@ -89,7 +94,16 @@
         this.filters = [];
         this.$emit('filters:clear');
       },
-      toggleColumnsFilters() {
+      closeDropdowns() {
+        this.closeColumnsFilters();
+        this.closeSavedFilters();
+      },
+      closeColumnsFilters() {
+        $('#filtersColumnsDropdown').removeClass('open');
+      },
+      toggleColumnsFilters(e) {
+        e.stopPropagation();
+        this.closeSavedFilters();
         $('#filtersColumnsDropdown').toggleClass('open');
       },
       loadFilters(filterUrl) {
@@ -125,7 +139,9 @@
         $('#savedFiltersContainer').removeClass('open');
         return true;
       },
-      toggleSavedFilters() {
+      toggleSavedFilters(e) {
+        e.stopPropagation();
+        this.closeColumnsFilters();
         $('#savedFiltersContainer').toggleClass('open');
       },
     }

app/views/repositories/_repository_filters.html.erb

@@ -23,7 +23,7 @@
         <filter-container
           :columns.sync="columns"
           :my_modules.sync="my_modules"
-          :filters.sync="filters"
+          :default-filters="defaultFilters"
           :can-manage-filters="canManageFilters"
           :saved-filters.sync="savedFilters"
           :filter-name="filterName"