ransack.es6 in spree_backend-4.4.0.rc1

- old
+ new

@@ -1,6 +1,6 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const QuickSearchInput = document.getElementById('quick_search')
 
   if (QuickSearchInput) {
     const QuickSearchPlaceHolder = QuickSearchInput.placeholder
     const TargetSearchFieldId = document.querySelector('input.js-quick-search-target').id
@@ -78,11 +78,11 @@
       filter = '<span class="js-filter badge badge-secondary d-inline-flex align-items-center" data-ransack-field="' + ransackFieldId + '">' + cleanLabel + '<i class="icon icon-cancel ml-2 js-delete-filter"></i></span>'
       $('.js-filters').append(filter).show()
     }
   })
 
-  // per page dropdown
+  // per page drop-down
   // preserves all selected filters / queries supplied by user
   // changes only per_page value
   $('.js-per-page-select').change(function() {
     var form = $(this).closest('.js-per-page-form')
     var url = form.attr('action')
@@ -90,19 +90,21 @@
     if (url.match(/\?/)) {
       url += '&per_page=' + value
     } else {
       url += '?per_page=' + value
     }
-    window.location = url
+    Turbo.visit(url)
   })
 
   // injects per_page settings to all available search forms
   // so when user changes some filters / queries per_page is preserved
-  $(document).ready(function() {
+  document.addEventListener("spree:load", function() {
     var perPageDropdown = $('.js-per-page-select:first')
     if (perPageDropdown.length) {
       var perPageValue = perPageDropdown.val().toString()
-      var perPageInput = '<input type="hidden" name="per_page" value=' + perPageValue + ' />'
+      var perPageInput = '<input class="hidden_per_page_input" type="hidden" name="per_page" value=' + perPageValue + ' />'
+
+      $('.hidden_per_page_input').remove()
       $('#table-filter form').append(perPageInput)
     }
   })
 })