Fix for Turbo not intercepting changes in window.location

gem/javascripts/pagy-module.js

@@ -52,6 +52,7 @@ const Pagy = (() => {
     // Init the input element
     const initInput = (el, getVars, trimParam) => {
         const input = el.querySelector("input");
+        const link = el.querySelector("a");
         const initial = input.value;
         const action = function () {
             if (input.value === initial) {
@@ -67,7 +68,8 @@ const Pagy = (() => {
             if (typeof trimParam === "string" && page === "1") {
                 url = trim(url, trimParam);
             }
-            window.location.href = url;
+            link.href = url;
+            link.click();
         };
         ["change", "focus"].forEach(e => input.addEventListener(e, input.select)); // auto-select
         input.addEventListener("focusout", action); // trigger action

gem/lib/pagy/extras/bootstrap.rb

@@ -57,7 +57,7 @@ def pagy_bootstrap_combo_nav_js(pagy, id: nil, classes: 'pagination', aria_label
 
       page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page" ) <<
                    %(style="text-align: center; width: #{pages.to_s.length + 1}rem; padding: 0; ) <<
-                   %(border: none; display: inline-block;" class="page-link active">)
+                   %(border: none; display: inline-block;" class="page-link active">#{JSTools::A_TAG})
 
       %(<nav#{id} class="pagy-bootstrap combo-nav-js" #{
           nav_aria_label(pagy, aria_label:)} #{

gem/lib/pagy/extras/bulma.rb

@@ -56,7 +56,8 @@ def pagy_bulma_combo_nav_js(pagy, id: nil, classes: 'pagy-bulma combo-nav-js pag
 
       page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page") <<
                    %(style="text-align: center; width: #{pages.to_s.length + 1}rem; height: 1.7rem; margin:0 0.3rem; ) <<
-                   %(border: none; border-radius: 4px; padding: 0; font-size: 1.1rem; color: white; background-color: #485fc7;">)
+                   %(border: none; border-radius: 4px; padding: 0; font-size: 1.1rem; color: white; ) <<
+                   %(background-color: #485fc7;">#{JSTools::A_TAG})
 
       %(<nav#{id} class="#{classes}" #{
           nav_aria_label(pagy, aria_label:)} #{

gem/lib/pagy/extras/foundation.rb

@@ -55,7 +55,7 @@ def pagy_foundation_combo_nav_js(pagy, id: nil, aria_label: nil)
 
       page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page" ) <<
                    %(style="text-align: center; width: #{pages.to_s.length + 1}rem; ) <<
-                   %(height: 1.5rem; padding: .5rem; margin: 0 .4rem; font-size: .875rem;" class="current">)
+                   %(height: 1.5rem; padding: .5rem; margin: 0 .4rem; font-size: .875rem;" class="current">#{JSTools::A_TAG})
 
       %(<nav#{id} class="pagy-foundation-combo-nav-js" #{
           nav_aria_label(pagy, aria_label:)} #{

gem/lib/pagy/extras/items.rb

@@ -47,7 +47,7 @@ def pagy_items_selector_js(pagy, id: nil, item_name: nil)
         vars[:items] = items # restore the items
 
         items_input = %(<input name="items" type="number" min="1" max="#{vars[:max_items]}" value="#{
-                         items}" style="padding: 0; text-align: center; width: #{items.to_s.length + 1}rem;">)
+                          items}" style="padding: 0; text-align: center; width: #{items.to_s.length + 1}rem;">#{JSTools::A_TAG})
 
         %(<span#{id} class="pagy items-selector-js" #{
             pagy_data(pagy, :selector, pagy.from, url_token)

gem/lib/pagy/extras/js_tools.rb

@@ -5,6 +5,9 @@ class Pagy # :nodoc:
 
   # Private module documented in the main classes
   module JSTools
+    # Dummy tag for input helpers: needed because Turbo does not intercept window.location changes
+    A_TAG = '<a href="#" style="display: none;">#</a>'
+
     # Additions for the Pagy class
     module PagyAddOn
       # `Pagy` instance method used by the `pagy*_nav_js` helpers.

gem/lib/pagy/extras/materialize.rb

@@ -57,7 +57,8 @@ def pagy_materialize_combo_nav_js(pagy, id: nil, aria_label: nil)
 
       page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page" ) <<
                    %(style="text-align: center; width: #{pages.to_s.length + 1}rem; height: 1.5rem; font-size: 1.2rem; ) <<
-                   %(border: none; border-radius: 2px; color: white; background-color: #ee6e73;" class="browser-default">)
+                   %(border: none; border-radius: 2px; color: white; background-color: #ee6e73;" class="browser-default"> ) <<
+                   JSTools::A_TAG
 
       %(<ul#{id} class="pagy-materialize combo-nav-js pagination" role="navigation" style="padding-right: 0;" #{
           nav_aria_label(pagy, aria_label:)} #{

gem/lib/pagy/extras/pagy.rb

@@ -33,7 +33,7 @@ def pagy_combo_nav_js(pagy, id: nil, aria_label: nil)
       pages = pagy.pages
 
       page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page" ) <<
-                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem; padding: 0;">)
+                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem; padding: 0;">#{JSTools::A_TAG})
 
       %(<nav#{id} class="pagy combo-nav-js" #{
           nav_aria_label(pagy, aria_label:)} #{

gem/lib/pagy/extras/semantic.rb

@@ -53,7 +53,8 @@ def pagy_semantic_combo_nav_js(pagy, id: nil, aria_label: nil)
       pages = pagy.pages
 
       page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page") <<
-                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem; padding: 0; margin: 0 0.3rem">)
+                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem; padding: 0; margin: 0 0.3rem">) <<
+                   JSTools::A_TAG
 
       %(<div#{id} class="pagy-semantic combo-nav-js ui compact menu" role="navigation" #{
           nav_aria_label(pagy, aria_label:)} #{

gem/lib/pagy/extras/uikit.rb

@@ -56,7 +56,7 @@ def pagy_uikit_combo_nav_js(pagy, id: nil, aria_label: nil)
       pages = pagy.pages
 
       page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page" ) <<
-                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem;">)
+                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem;">#{JSTools::A_TAG})
 
       %(<ul#{id} class="pagy-uikit combo-nav-js uk-button-group uk-pagination uk-flex-center" role="navigation" #{
           nav_aria_label(pagy, aria_label:)} #{

src/pagy.ts

@@ -72,6 +72,7 @@ const Pagy = (() => {
     // Init the input element
     const initInput = (el:Element, getVars:(v:string) => [string, string], trimParam?:string) => {
         const input = el.querySelector("input") as HTMLInputElement;
+        const link = el.querySelector("a") as HTMLAnchorElement;
         const initial = input.value;
         const action = function () {
             if (input.value === initial) { return }  // not changed
@@ -83,7 +84,8 @@ const Pagy = (() => {
             }
             let [page, url] = getVars(input.value);   // eslint-disable-line prefer-const
             if (typeof trimParam === "string" && page === "1") { url = trim(url, trimParam) }
-            window.location.href = url;
+            link.href = url;
+            link.click();
         };
         ["change", "focus"].forEach(e => input.addEventListener(e, input.select));        // auto-select
         input.addEventListener("focusout", action);                                       // trigger action