Skip to content

Fix stale sidebar open state when using prefetch links #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

daleweaver777
Copy link

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.

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.
@daleweaver777
Copy link
Author

Two alternative options:

  1. Remove prefetch from Inertia links.
  2. Move the sidebar into a persistent layout so it doesn't get cached with the page? I didn't test but I think it would work since the persistent layout doesn't get distroyed and recreated on every navigation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant