Barba: Problem with back / forward buttons

Created on 20 Nov 2019 · 3Comments · Source: barbajs/barba

I have issues with back & forward buttons in the browser.

To recreate I have created very simple example. Two html files: test1 & test2, each with a simple link to the other file. Both with barba wrappers / containers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body data-barba="wrapper">
    <div data-barba="container">
        test 1
        <br>
        <a href="test2.php">next page</a>
    </div>
</body>
    <script src="test.js"></script>
</html>

Then a simple transitions initialization:

barba.init({
    transitions: [
        {
            name: 'generic',
            priority: 2,
            enter() {
                console.log('generic enter');
            },
        }, {
            name: 'back',
            priority: 1,
            custom: ({ trigger }) => {return trigger === 'back'},
            enter() {
                console.log('back enter')
            },
        }, {
            name: 'forward',
            priority: 1,
            custom: ({ trigger }) => {return trigger === 'forward'},
            enter() {
                console.log('forward enter')
            },
        },
    ]
    });

Now the test scenario is:

go through a few links... This results in a bunch of "generic enter" logs. So far so good.
now reload.
go back (browser nav button). I see forward log.
go forward (browser nav button). I see back log.
I consider both a bug.
go back twice (still the nav button). I see forward log followed with a back log. (further backs result in a back log which is fine).
go further twice... I see forward log (ok) followed with a back log (bug).

I can attach a simple repo should you need it to recreate. Using barba 2.8.0.

@barbcore bug v2

Source

pburdylo

👀2

Most helpful comment

Hi @pburdylo,

Thanks for pointing this out.
We need to check barba.history on popstate events.
I will work on it tomorrow and release a quick fix.
Alongside, we will probably consider some refactoring around this history management…