diff --git a/app/views/filters/list/_select.html.erb b/app/views/filters/list/_select.html.erb
index 65b73b071b8f..568605572f34 100644
--- a/app/views/filters/list/_select.html.erb
+++ b/app/views/filters/list/_select.html.erb
@@ -9,7 +9,8 @@
{
class: 'form--select -slim',
'data-filter--filters-form-target': 'filterValueSelect',
- 'data-filter-name': filter.name
+ 'data-filter-name': filter.name,
+ 'data-action': 'change->filter--filters-form#detectChange'
}]
if multi_value
select_options.third[:multiple] = true
@@ -19,7 +20,7 @@
class="form-label no-decoration-on-hover -transparent multi-select-toggle"
tabindex="0"
data-action="click->filter--filters-form#toggleMultiSelect"
- data-filter--filters-form-filter-name-param="<%= filter.name %>">
+ data-filter--filters-form-filter-name-param="<%= filter.name %>">
<%= t(:label_enable_multi_select) %>
diff --git a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
index 4339650433ef..8c7e54aed36b 100644
--- a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
+++ b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
@@ -78,6 +78,24 @@ export default class FiltersFormController extends Controller {
connect() {
const urlParams = new URLSearchParams(window.location.search);
this.displayFiltersValue = urlParams.has('filters');
+
+ this.simpleValueTargets.forEach((simpleValue) => {
+ simpleValue.addEventListener('change', this.sendForm.bind(this));
+ });
+
+ this.filterValueSelectTargets.forEach((filterValueSelect) => {
+ filterValueSelect.addEventListener('input', this.sendForm.bind(this));
+ });
+ }
+
+ disconnect() {
+ this.simpleValueTargets.forEach((simpleValue) => {
+ simpleValue.removeEventListener('change', this.sendForm.bind(this));
+ });
+
+ this.filterValueSelectTargets.forEach((filterValueSelect) => {
+ filterValueSelect.removeEventListener('input', this.sendForm.bind(this));
+ });
}
toggleDisplayFilters() {
@@ -89,6 +107,10 @@ export default class FiltersFormController extends Controller {
this.toggleFilterFormVisible();
}
+ detectChange() {
+ debugger;
+ }
+
toggleButtonActive() {
if (this.displayFiltersValue) {
this.filterFormToggleTarget.setAttribute('aria-pressed', 'true');
@@ -102,6 +124,7 @@ export default class FiltersFormController extends Controller {
}
toggleMultiSelect({ params: { filterName } }:{ params:{ filterName:string } }) {
+ console.log('Toggled!!!');
const valueContainer = this.filterValueContainerTargets.find((filterValueContainer) => filterValueContainer.getAttribute('data-filter-name') === filterName);
const singleSelect = this.filterValueSelectTargets.find((selectField) => !selectField.multiple && selectField.getAttribute('data-filter-name') === filterName);
const multiSelect = this.filterValueSelectTargets.find((selectField) => selectField.multiple && selectField.getAttribute('data-filter-name') === filterName);
@@ -125,6 +148,8 @@ export default class FiltersFormController extends Controller {
Array.from(selectElement.options).forEach((option) => {
option.selected = option.value === selectedValue;
});
+
+ this.sendForm();
}
addFilter(event:Event) {
@@ -136,6 +161,8 @@ export default class FiltersFormController extends Controller {
this.disableSelection();
this.reselectPlaceholderOption();
this.setSpacerVisibility();
+
+ this.sendForm();
}
private disableSelection() {
@@ -154,6 +181,8 @@ export default class FiltersFormController extends Controller {
const removedFilterOption = selectOptions.find((option) => option.value === filterName);
removedFilterOption?.removeAttribute('disabled');
this.setSpacerVisibility();
+
+ this.sendForm();
}
private setSpacerVisibility() {