Popstate events doesn't trigger transition correctly with query string #587

BigGitWorld · 2020-11-16T08:26:30Z

Hi.
Barba version: lastest release version
Browser: firefox and Chrome (Latest versions)

How I added barba:
I have wrapped body of page () with the data-barba="wrapper" and main content of pages (div) with the data-barba="container" data-barba-namespace="home" and content for different pages are changing properly.

Scenario:
When I want to move between screens in a page with pagination items, back/forward button does not change content of page.
For example:

http://localhost:8080/ -> main page, I click a button in this page to send a request to server to open page (2)
http://localhost:8080/products?page=1 -> a simple page with paginated items with page=1
https://localhost:8080/products?page=2 -> the above simple page with paginated items with page=2

For the first time when I click step (1)-(3), I send a request to the server to fetch data and everything works.
Also, when I click on the buttons (1),(2) in the paginated page (step 2 and 3), content of page changes.

Error:
Now I want to use back/forward button to move between steps (1), (2) and (3).
moving between (1) and (2) works, but moving between (2) and (3) does not work (only URL of page changes and content of shown paginated items does not change).

what is the problem?
When I use jquery-pjax library, everything woks fine by back/forward buttons.
I used the barba.js, because it says that it uses pjax and history API that is something I need.
I'm looking for a solution to send request to the server or use client side only to move between pages.

The text was updated successfully, but these errors were encountered:

xavierfoucrier · 2020-11-16T08:36:00Z

Hi @BigGitWorld,

Thanks for opening the issue.
Please provide a minimum reproductible test repository for that specific case.

Regards 😉

BigGitWorld · 2020-11-18T08:40:52Z

Dear @xavierfoucrier
I'm sorry really for late answer. Please excuse me because I'm very busy.
But I will provide a simple example as soon as possible.
so please don't close the issue.

xavierfoucrier · 2020-11-18T09:15:12Z

@BigGitWorld I am busy too, so take your time 😉

pburdylo · 2021-01-04T15:10:48Z

I think I can provide an example, I stumbled the same behavior.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body data-barba="wrapper">
    <div data-barba="container">
        <a href="?step=1">step 1</a><br>
        <a href="?step=2">step 2</a><br>
        <a href="?step=3">step 3</a><br>
        <a href="?step=4">step 4</a><br>
    </div>
    <script src="https://unpkg.com/@barba/core"></script>
    <script>
        barba.init({
            transitions: [
                {
                    name: 'generic',
                    enter() {
                        console.log('generic enter');
                    },
                }
            ]        
        })
    </script>
</body>
</html>

Navigating through the links works fine (a few 'enter' logs). When I click back and/or forward button I don't get any log, seems nothing changes except the url.

xavierfoucrier · 2021-01-04T15:34:29Z

Hi @pburdylo!

Thanks for your feedback.
I will have a look at this soon 😉

xavierfoucrier · 2021-01-09T22:41:47Z

Hi @pburdylo @BigGitWorld,

Just to let you know, this is a duplicate of #532 .. 😃

Barba is made for page transitions, this is the normal behavior since query parameters are not considered as "pages".

But anyway, it looks a little bit buggy after a bunch of tests.
Here is a quick workaround that uses the magic self transition:

barba.init({
  transitions: [{
    name: 'generic',
    enter() {
      console.log('[generic] enter');
    },
  }, {
    name: 'self',
    enter() {
      console.log('[self] enter');
    },
  }],
});

There are disparities when only using the generic or self transition alone.

I keep the issue opened in order to discuss it with @thierrymichel.

pburdylo · 2021-01-11T12:30:55Z

My problem is that the transition works with query params when using links ('a href') but doesn't when using back/forward.

BTW – are transition names ('generic', 'self') important or are they only informational and can be anything? I assumed the latter, but then your example shouldn't work (no difference between generic and self but for the name), which made me reconsider...

xavierfoucrier · 2021-01-11T12:57:08Z

@pburdylo self is a magic keyword, see https://barba.js.org/docs/advanced/transitions/#Self.

pburdylo · 2021-01-12T11:59:46Z

still, the situation is confusing.

when initializing barba with only 'generic' transition the behavior is (a) transition on links leading to the same page with different query args (b) reload on link to the same page with the same query args (c) no transition / reload when using BACK/FWD buttons (only URL is changed)
when initializing barba with both 'generic' and 'self' transitions the behavior I get is (a) generic transition on links leading to the same page with different query args (b) self transition on link to the same page with the same query args (c) self transition when using BACK/FWD buttons

I expect same behavior when using BACK/FWD or clicking on a link when the clicked link is the same as the link in browser history stack. What do you think?

PS – thanks for staying in touch, great job with the lib :)

pburdylo · 2021-01-12T12:11:49Z

three more cents:

a workaround in a simple case is to have two transitions (generic & self) reusing the same code
not considering query args as page changes is a bit over restricting IMO. (a) paged product list as in original GreatGitWorld post is a good example (b) my real case is language change (c) in general – standard wordpress configuration gets you xxx.com/?page_id=ID... I guess the list could be easily extended.
is it possible to have a few 'self' transitions with custom rules? My fast experiment shows that 'custom' property is ignored on self transition. And my intuition says that transition names should be unique. That would be pretty standard situation for me to have a specific animation for different cases, like reload of home page and loading next product list page, etc.

xavierfoucrier · 2021-01-12T12:57:22Z

Hi @pburdylo,

Can you take the time to build a minimal reproductible test repository?
This way Thierry will be able to have a look when coming back to this issue 😉

I already noticed that this is a little bit buggy.
Great thanks!

pburdylo · 2021-01-12T13:02:55Z

scenario 1 – just a plain index.html file with the code I pasted above #587 (comment)

scenario 2 – the same file with barba.init replaced with the code you pasted above #587 (comment)

pburdylo · 2021-02-19T12:48:20Z

do you have any update on that?

xavierfoucrier · 2021-02-19T13:23:10Z

Hi @pburdylo,

Sorry but for now I haven't found the time to dive into this bug..
Thanks for your patience and have a nice day! 🌞

martinkosmela · 2021-12-31T09:08:11Z

Hi,
I'm here because the same issues with back/forward buttons occured also to me, and it seems that the bug hasn't been resolved yet.

I experienced the problem while filtering the page by using query params.

My current implementation of barba (2.9.7) init looks like below:

barba.init({
    debug: true,
    prefetchIgnore: true,
    cacheIgnore: true,
    transitions: [
        {
            name: 'self',
            before(data) {
                console.log('before self', data);
            },
            enter() {
                console.log('enter self');
            },
            after() {
                console.log('after self');
            }
        }
    ],
});

barba.hooks.before(data => {
    console.log('before hook');
});

barba.hooks.enter(() => {
    console.log('enter hook');
});

barba.hooks.after(() => {
    console.log('after hook');
});

There is one scenario, where everything looks to be working fine:

http://localhost:3000/reports - opens a page with list of items
http://localhost:3000/reports?document-type=type-1 - send request and filter documents by type 1

Now, after clicking back button, all hooks getting fired and page contents reloads to previous state without query params as expected.

Another scenario:

http://localhost:3000/reports - opens a page with list of items
http://localhost:3000/reports?document-type=type-1 - send request and filter documents by type 1
http://localhost:3000/reports?document-type=type-2 - send request and filter documents by type 2

Now, after clicking back button, "before" hooks gets fired and barba error is displayed in console. URL in the browser change to the previous one, but content of the page do not update.

@xavierfoucrier is it any chance for you to find the time to dive into this bug, please?
What could be causing the error at @barba/core/dist/barba.umd.js shown on the screenshot above?

xavierfoucrier · 2021-12-31T13:25:26Z

@martinkosmela I will. I am currently in vacation mode with my family. Thanks for your patience, and again, sorry for the delay.

martinkosmela · 2022-02-14T08:24:42Z

@xavierfoucrier I hope you have had a great time vacationing with your family.

Did you have any chance to take a look on this issue since then?

xavierfoucrier · 2022-02-14T10:28:38Z

@martinkosmela I am currently on a rush period right now, but, we take time with Thierry to discuss on current bugs and opened issues.

This one is assign to me, and I will take the appropriate time to check it as soon as possible.
I also have code example from @pburdylo to debug.

Thanks again for your patience.

braican · 2022-05-16T21:33:44Z

I'm also seeing a similar issue where I'm getting the same TypeError: Cannot read properties of undefined (reading 'undefined') error as @martinkosmela upon trying to use the back button to return to a page that contains a query string.

I have an application that is fetching and rendering records from an API with filter controls available to the user. When a user interacts with a filter, I'm modifying the current history state with history.replaceState to add the active filters to the url via a query string and triggering another request to the API to fetch the filtered results. An example flow might look like this:

A user lands on the initial page at https://localhost/courses
In the filter UI, they'll click on Monday to filter results by those courses that only happen on a Monday. This action will trigger two things:
- We'll use history.replaceState to update the url to https://localhost/courses?day=monday
- An ajax request gets fired off to fetch all of the courses that take place on Monday.
The user clicks on a returned course to visit that course's detail page.
They then click on the browser's back button to get back to the filtered view of courses.

In my case, this last step triggers the error - rather than navigating back to the previous url (including the query string), the page does not update and I see the following error in my console:

I believe this is related to the use of history.replaceState to modify the url before the user navigates; it seems that when I programmatically update the current history entry with that function, Barba doesn't receive that change which then invalidates its own internal history state.

I was able to fix my issue by manually pushing a new history item to Barba's internal history state when I update the browser's native history entry:

history.replaceState({}, '', `${base}?${queryString}`);

// Adding this line fixed my issue.
barba.history.add(`${base}?${queryString}`, 'barba');

saminton · 2023-04-20T10:33:09Z

Any news on this ? I just ran into this issue also. It's been over 2 years since the initial bug report 🫠

As @braican stated it seems to be related to the use of history.replaceState(). history.pushState() however works fine. The solution using barba.history.add(); he mentioned isn't working for me I still get an error, also I do not want to add to the history state, juste change the url to reflect the choices on the current page.

This is all it takes to produce the error.

const url = new URL(window.location.href);
url.searchParams.set("category", category);	
history.replaceState({}, "", url);

The back button works but as soon as I go forward to an url that was modified I get this error

Using @barba/core 2.9.7

xavierfoucrier · 2023-04-20T12:30:41Z

Added to the next milestone, will work on it soon 🕶️

This fix #587.

xavierfoucrier self-assigned this Nov 16, 2020

xavierfoucrier added the await test repository waiting for a minimal test repository label Nov 16, 2020

xavierfoucrier changed the title ~~Back forward button does not work correctly~~ Back forward button does not work correctly with query string Jan 9, 2021

xavierfoucrier added @barba/core discussion duplicate and removed await test repository waiting for a minimal test repository labels Jan 9, 2021

stale bot added the wontfix label Jun 9, 2021

xavierfoucrier removed the wontfix label Jun 9, 2021

barbajs deleted a comment from stale bot Dec 31, 2021

xavierfoucrier added this to the barba@next milestone Apr 20, 2023

xavierfoucrier changed the title ~~Back forward button does not work correctly with query string~~ Back forward button does not trigger transition correctly with query string Jul 26, 2023

xavierfoucrier changed the title ~~Back forward button does not trigger transition correctly with query string~~ Popstate events doesn't trigger transition correctly with query string Jul 26, 2023

xavierfoucrier added bug and removed duplicate discussion labels Jul 26, 2023

xavierfoucrier added a commit that referenced this issue Jul 27, 2023

fix(core): 🐛 fix transition with popstate event and query string

1b48cb8

This fix #587.

xavierfoucrier closed this as completed in e27736f Jul 27, 2023

xavierfoucrier mentioned this issue Jul 21, 2023

Documentation review #703

Closed

15 tasks

blessedzulu mentioned this issue Jul 2, 2024

[Snyk] Upgrade @barba/core from 2.9.7 to 2.10.0 blessedzulu/portfolio#21

Open

andressbolivarr mentioned this issue Jul 2, 2024

[Snyk] Upgrade @barba/core from 2.9.7 to 2.10.0 andressbolivarr/Portfolio#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Popstate events doesn't trigger transition correctly with query string #587

Popstate events doesn't trigger transition correctly with query string #587

BigGitWorld commented Nov 16, 2020 •

edited

Loading

xavierfoucrier commented Nov 16, 2020

BigGitWorld commented Nov 18, 2020

xavierfoucrier commented Nov 18, 2020

pburdylo commented Jan 4, 2021 •

edited

Loading

xavierfoucrier commented Jan 4, 2021

xavierfoucrier commented Jan 9, 2021

pburdylo commented Jan 11, 2021 •

edited

Loading

xavierfoucrier commented Jan 11, 2021

pburdylo commented Jan 12, 2021

pburdylo commented Jan 12, 2021

xavierfoucrier commented Jan 12, 2021

pburdylo commented Jan 12, 2021

pburdylo commented Feb 19, 2021

xavierfoucrier commented Feb 19, 2021

martinkosmela commented Dec 31, 2021

xavierfoucrier commented Dec 31, 2021

martinkosmela commented Feb 14, 2022

xavierfoucrier commented Feb 14, 2022

braican commented May 16, 2022

saminton commented Apr 20, 2023

xavierfoucrier commented Apr 20, 2023

Popstate events doesn't trigger transition correctly with query string #587

Popstate events doesn't trigger transition correctly with query string #587

Comments

BigGitWorld commented Nov 16, 2020 • edited Loading

xavierfoucrier commented Nov 16, 2020

BigGitWorld commented Nov 18, 2020

xavierfoucrier commented Nov 18, 2020

pburdylo commented Jan 4, 2021 • edited Loading

xavierfoucrier commented Jan 4, 2021

xavierfoucrier commented Jan 9, 2021

pburdylo commented Jan 11, 2021 • edited Loading

xavierfoucrier commented Jan 11, 2021

pburdylo commented Jan 12, 2021

pburdylo commented Jan 12, 2021

xavierfoucrier commented Jan 12, 2021

pburdylo commented Jan 12, 2021

pburdylo commented Feb 19, 2021

xavierfoucrier commented Feb 19, 2021

martinkosmela commented Dec 31, 2021

xavierfoucrier commented Dec 31, 2021

martinkosmela commented Feb 14, 2022

xavierfoucrier commented Feb 14, 2022

braican commented May 16, 2022

saminton commented Apr 20, 2023

xavierfoucrier commented Apr 20, 2023

BigGitWorld commented Nov 16, 2020 •

edited

Loading

pburdylo commented Jan 4, 2021 •

edited

Loading

pburdylo commented Jan 11, 2021 •

edited

Loading