onPopstate prevents browser navigation when navigating between pages that differ by query string

[stefbowerman]

Describe the bug I'm using Taxi on a Shopify store. Collections are paginated using the url search param page to differentiate between pages. When clicking anchor links for different pages, Taxi navigates successfully. When clicking an anchor link and then navigating using the browser forward and back buttons, Taxi doesn't navigate at all.

The forward and back buttons call the onPopState function:

    /**
     * @private
     * @return {void|boolean}
     */
    onPopstate = () => {
        // don't trigger for on-page anchors
        if (window.location.pathname === this.currentLocation.pathname && !this.isPopping) {
            return false
        }
        }

This returns false in this case since window.location.pathname and this.currentLocation.pathname are equivalent. The issue is that the from / to URLs differ by query string.

To Reproduce

• Go to a url like /collections/apparel
• Click a link to go to /collections/apparel?page=2
• Click the browser "back" button

Info

https://github.com/user-attachments/assets/4aa1eb18-be76-4f4a-8bc1-4c36287e52fb

• Device: Mackbook Pro
• OS: 12.5.1
• Browser: Chrome
• Version: 127.0.6533.120

[jakewhiteley]

@stefbowerman thanks for raising this.

I had a similar issue last week, where taxi doesn't care too much about query string params, so it's evident I need to do a deep dive into this to ensure that query string versions of URLs are always treated as new pages.

I am away this week, but next week I will try to release a solution for you

[stefbowerman]

@jakewhiteley Thanks for looking into this! I love this library and really want to keep using it for this project 🙏🏻

[jakewhiteley]

@stefbowerman could you try 1.7.0?

[stefbowerman]

@jakewhiteley - Just updated and it's working beautifully. Thanks so much for the quick fix!