3 files changed, 24 insertions, 10 deletions

diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js
index 8149602f329..17c39cc7bbb 100644
--- a/app/assets/javascripts/filterable_list.js
+++ b/app/assets/javascripts/filterable_list.js
@@ -13,14 +13,18 @@ export default class FilterableList {
 
   initSearch() {
     // Wrap to prevent passing event arguments to .filterResults;
-    this.debounceFilter = _.debounce(() => {
-      this.filterResults();
-    }, 500);
+    this.debounceFilter = _.debounce(this.onFilterInput.bind(this), 500);
 
     this.unbindEvents();
     this.bindEvents();
   }
 
+  onFilterInput() {
+    const url = this.filterForm.getAttribute('action');
+    const data = $(this.filterForm).serialize();
+    this.filterResults(url, data, 'filter-input');
+  }
+
   bindEvents() {
     this.listFilterElement.addEventListener('input', this.debounceFilter);
   }
@@ -29,7 +33,7 @@ export default class FilterableList {
     this.listFilterElement.removeEventListener('input', this.debounceFilter);
   }
 
-  filterResults(url, data) {
+  filterResults(url, data, comingFrom) {
     const endpoint = url || this.filterForm.getAttribute('action');
     const additionalData = data || $(this.filterForm).serialize();
 
@@ -42,7 +46,13 @@ export default class FilterableList {
       dataType: 'json',
       context: this,
       complete: this.onFilterComplete,
-      success: this.onFilterSuccess,
+      success: (response, textStatus, xhr) => {
+        if (this.preOnFilterSuccess) {
+          this.preOnFilterSuccess(comingFrom);
+        }
+
+        this.onFilterSuccess(response, xhr);
+      },
     });
   }
 
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 50bdc27a7a6..6fcc016110f 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -16,12 +16,10 @@ export default {
   },
   methods: {
     onClickRowGroup(e) {
-      // e.stopPropagation();
+      e.stopPropagation();
 
       // Skip for buttons
-      if (e.target.tagName === 'A' ||
-        (e.target.tagName === 'I' && e.target.parentElement.tagName === 'A')) {
-      } else {
+      if (!(e.target.tagName === 'A') && !(e.target.tagName === 'I' && e.target.parentElement.tagName === 'A')) {
         if (this.group.hasSubgroups) {
           eventHub.$emit('toggleSubGroups', this.group);
         } else {
diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js
index ab674dd4f5b..9a8797caf36 100644
--- a/app/assets/javascripts/groups/groups_filterable_list.js
+++ b/app/assets/javascripts/groups/groups_filterable_list.js
@@ -33,7 +33,13 @@ export default class GroupFilterableList extends FilterableList {
     this.filterResults(this.filterUrl);
   }
 
-  onFilterSuccess(data, textStatus, xhr) {
+  preOnFilterSuccess(comingFrom) {
+    if (comingFrom === 'filter-input') {
+      this.filterUrl = `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`;
+    }
+  }
+
+  onFilterSuccess(data, xhr) {
     super.onFilterSuccess(data);
 
     this.store.setGroups(data);