From c04cae3083badd8c51510abfce38926eb6fcb230 Mon Sep 17 00:00:00 2001 From: Dale Weaver <68517144+daleweaver777@users.noreply.github.com> Date: Fri, 2 May 2025 00:13:09 -0400 Subject: [PATCH] Fix stale sidebar open state when using prefetch links When using Inertia prefetch links, the sidebar open state for that page is cached for 30 seconds (default) when hovering over a link. This can lead to unexpected behavior of the sidebar reopening or reclosing when navigating to the cached page. The router cache should be cleared whenever the sidebar state changes to clear out a potential stale sidebar open state. Reproduction: 1. Your app has 2 pages: Dashboard and Page 2. The prefetch attribute should be on both Inertia links in the sidebar. 2. Navigate to Page 2 with sidebar open. 3. Hover over (but don't click) the Dashboard link to prefetch it and then close the sidebar. 4. Now click on the Dashboard link to navigate to the cached page. The sidebar will now be open because that was the state the sidebar was in when prefetched. The Vue starter kit is not using prefetch links so it doesn't have this problem. If it is updated to use prefetch links, this fix will need added to it as well. --- resources/js/components/app-sidebar-header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/app-sidebar-header.tsx b/resources/js/components/app-sidebar-header.tsx index e31381e0..55292a01 100644 --- a/resources/js/components/app-sidebar-header.tsx +++ b/resources/js/components/app-sidebar-header.tsx @@ -6,7 +6,7 @@ export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: Breadcrum return (
- + router.flushAll()} />