bug #3547 Fix unchecking / resetting filters (lukasluecke)

This PR was merged into the 3.0.x-dev branch.

Discussion
----------

Fix unchecking / resetting filters

Fixes #3329

Neither unchecking filters (as noted in the issue), nor clicking the "reset" button in the modal worked. Now everything works as expected 🙂

Commits
-------

7d93989 Fix unchecking / resetting filters

src/Resources/views/crud/form_theme.html.twig

@@ -471,7 +471,7 @@
     {% set applied_filters = ea.request.query.get('filters')|default([])|keys %}
 
     {% for field in form %}
-        <div class="filter-field {% if not loop.last %}border-bottom{% endif %} py-1 px-3 {% if loop.last %}pb-2{% endif %}">
+        <div class="filter-field {% if not loop.last %}border-bottom{% endif %} py-1 px-3 {% if loop.last %}pb-2{% endif %}" data-filter-property="{{ field.vars.name }}">
             <div class="filter-heading" id="filter-heading-{{ loop.index }}">
                 <input type="checkbox" class="filter-checkbox" {% if field.vars.name in applied_filters %}checked{% endif %}>
                 <a data-toggle="collapse" href="#filter-content-{{ loop.index }}" aria-expanded="{{ field.vars.name in applied_filters ? 'true' : 'false' }}" aria-controls="filter-content-{{ loop.index }}">

src/Resources/views/crud/includes/_filters_modal.html.twig

@@ -22,17 +22,24 @@
 <script>
     const filterModal = document.querySelector('#modal-filters');
 
+    const removeFilter = function(field) {
+        field.closest('form').querySelectorAll('input[name^="filters['+field.dataset.filterProperty+']"]').forEach(hidden => {
+            hidden.remove();
+        });
+        field.remove();
+    }
+
     document.querySelector('#modal-clear-button').addEventListener('click', function() {
         filterModal.querySelectorAll('.filter-field').forEach(filterField => {
-            filterField.remove();
+            removeFilter(filterField);
         });
 
         filterModal.querySelector('form').submit();
     });
 
     document.querySelector('#modal-apply-button').addEventListener('click', function() {
         filterModal.querySelectorAll('.filter-checkbox:not(:checked)').forEach(notAppliedFilter => {
-            notAppliedFilter.closest('.filter-field').remove();
+            removeFilter(notAppliedFilter.closest('.filter-field'));
         });
         filterModal.querySelector('form').submit();
     });