Url not changing after some navigations in SPA mode

When navigating a few times, the url stops changing into the new route (stays on the old one), even though the actual page content does change. I've tested this in Chrome and Safari with a fresh Laravel 12 + Filament v4 install, see the attached video (i performed a clean install, added a custom page and enabled SPA mode). I've seen the same thing happen in one of my other apps running Filament v3.
After waiting a few seconds and then navigating to another page, the url does change again.

Chrome logs a warning when this happens, see the attached screenshot. I looked into this warning and found a Livewire PR https://github.com/livewire/livewire/pull/9278 which may be related, however that doesn't seem to have fixed this specific issue.
I'm asking here because i'm unable to reproduce it in a Livewire application.

Any guidance or solution would be helpful, or some direction on where to look to investigate this further. Thanks!

Solution

I've created a view with the JS code and used Filament's render hooks to render it.

navigation-fix.blade.php

navigation-fix.blade.php

<script>
    (() => {
        const original = window.history.replaceState;
        let timer = Date.now();

        let timeout = null;
        let lastArgs = null;

        window.history.replaceState = function (...args) {
            const time = Date.now();

            if (time - timer < 100) {
                lastArgs = args;

                if (timeout) {
                    clearTimeout(timeout);
                }

                timeout = setTimeout(() => {
                    original.apply(this, lastArgs);

                    timeout = null;
                    lastArgs = null;
                }, 100);

                return;
            }

            timer = time;

            original.apply(this, args);
        }
    })();
</script>

<script>
    (() => {
        const original = window.history.replaceState;
        let timer = Date.now();

        let timeout = null;
        let lastArgs = null;

        window.history.replaceState = function (...args) {
            const time = Date.now();

            if (time - timer < 100) {
                lastArgs = args;

                if (timeout) {
                    clearTimeout(timeout);
                }

                timeout = setTimeout(() => {
                    original.apply(this, lastArgs);

                    timeout = null;
                    lastArgs = null;
                }, 100);

                return;
            }

            timer = time;

            original.apply(this, args);
        }
    })();
</script>

In a service provider;

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn (): View => view('core::navigation-fix'),
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn (): View => view('core::navigation-fix'),
        );

Jump to solution

Filament•7mo ago•

56 replies

Robin

Url not changing after some navigations in SPA mode

Solution

I've created a view with the JS code and used Filament's render hooks to render it.

navigation-fix.blade.php

navigation-fix.blade.php

<script>
    (() => {
        const original = window.history.replaceState;
        let timer = Date.now();

        let timeout = null;
        let lastArgs = null;

        window.history.replaceState = function (...args) {
            const time = Date.now();

            if (time - timer < 100) {
                lastArgs = args;

                if (timeout) {
                    clearTimeout(timeout);
                }

                timeout = setTimeout(() => {
                    original.apply(this, lastArgs);

                    timeout = null;
                    lastArgs = null;
                }, 100);

                return;
            }

            timer = time;

            original.apply(this, args);
        }
    })();
</script>

<script>
    (() => {
        const original = window.history.replaceState;
        let timer = Date.now();

        let timeout = null;
        let lastArgs = null;

        window.history.replaceState = function (...args) {
            const time = Date.now();

            if (time - timer < 100) {
                lastArgs = args;

                if (timeout) {
                    clearTimeout(timeout);
                }

                timeout = setTimeout(() => {
                    original.apply(this, lastArgs);

                    timeout = null;
                    lastArgs = null;
                }, 100);

                return;
            }

            timer = time;

            original.apply(this, args);
        }
    })();
</script>

In a service provider;

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn (): View => view('core::navigation-fix'),
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn (): View => view('core::navigation-fix'),
        );

Jump to solution

Url not changing after some navigations in SPA mode

Url not changing after some navigations in SPA mode

Similar Threads

Similar Threads

Similar Threads