Fixed top filter button clear functionality

app/templates/element/filter.php

@@ -99,6 +99,10 @@
           <?php
             // Construct aria-controls string
             $aria_controls = $key;
+            // We save the name of the id into a dataset variable, data-identifier. This is an easy way
+            // to store the correct identifier in the case of dates. Dates have two search fields for each column
+            // which makes it more complicated to keep track of the id.
+            $data_identifier = is_array($params) ? implode(':', array_keys($params)) : $key;
 
             // We have active filters - not just a sort.
             $hasActiveFilters = true;
@@ -110,7 +114,7 @@
               $$populated_vvar[ $search_params[$key] ] :
               (is_array($search_params[$key]) ? 'Range' : $search_params[$key]);
           ?>
-          <button class="top-filters-active-filter deletebutton spin btn btn-default btn-sm" type="button" aria-controls="<?php print $aria_controls; ?>" title="<?= __d('operation', 'clear.filters',[2]); ?>">
+          <button class="top-filters-active-filter deletebutton spin btn btn-default btn-sm" data-identifier="<?= $data_identifier ?>" type="button" aria-controls="<?php print $aria_controls; ?>" title="<?= __d('operation', 'clear.filters',[2]); ?>">
              <em class="material-icons">cancel</em>
              <span class="top-filters-active-filter-title">
                <?= $vv_searchable_attributes[$key]['label'] ?>

app/templates/element/javascript.php

@@ -127,12 +127,10 @@
       e.preventDefault();
       e.stopPropagation();
       $(this).hide();
-      // CAKEPHP transforms snake case variables to kebab. As a result
-      // searching for the initial key will fail
-      original_value = $(this).attr("aria-controls");
-      value_to_snake = original_value.replace(/_/g, "-");;
-      filterId = '#' + value_to_snake;
-      $(filterId).val("");
+      $(this)[0].dataset.identifier.split(':').forEach( (ident) => {
+        let filterId = '#' + ident;
+        $(filterId).val("");
+      });
       $(this).closest('form').submit();
     });
 

app/webroot/js/comanage/comanage.js

@@ -204,7 +204,7 @@ function limitPage(pageLimit,recordCount,currentPage) {
 // Clear the top search form for index views
 // formObj         - form object (DOM form obj, required)
 function clearTopSearch(formObj) {
-  for (var i=0; i<formObj.elements.length; i++) {
+  for (let i=0; i<formObj.elements.length; i++) {
     if(formObj.elements[i].type != 'hidden') {
       formObj.elements[i].disabled = true;
     }

app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js

@@ -140,14 +140,17 @@ export default {
     // POST: For the POST requests we want to strip out all the Vue Related fields but send all the other form fields
     // GET: For GET Requests empty fields are useless, So we need to strip them out as well.
     curForm.addEventListener('submit', e => {
+      // For the GET request send using the default flow
+      if (curForm.getAttribute('method') != 'get') {
+        e.preventDefault();
+      }
       let dateWidgetInputs = document.querySelectorAll('duet-date-picker input');
       // Remove all the Vue related fields
       Array.prototype.slice.call(dateWidgetInputs).forEach( (el) => {
         el.parentNode.removeChild(el);
       });
       // For the GET request send using the default flow
       if (curForm.getAttribute('method') != 'get') {
-        e.preventDefault();
         curForm.submit();
       }
     });