nextcloud / nextcloud/cookbook

Category/tag navigation shows the previously selected category (setup() reads stale route in onBeforeRouteUpdate)

Open Beginner friendly
#3,343 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Frontend
Dominant language
HTML
Stars
641
Forks
113
Avg merge
21h 31m
Merged PRs (30d)
26

Description

Description
When switching directly from one category to another in the left navigation, the recipe list shows the recipes of the previously selected category (and the category filter chip also shows the previous name). The list is always "one click behind". The first click coming from the index page or from a recipe view works; only category → category (and tag → tag, same code path) is affected.

The backend is fine: GET /apps/cookbook/api/v1/category/{name} returns the correct recipes for every category. The problem is in the frontend.

Root cause (v0.11.10, src/components/SearchResults.vue)

onBeforeRouteUpdate((to, from, next) => {
    // Move to next route as expected
    next();
    // Reload view
    setup();
});

setup() reads the category from the reactive route object:

const route = useRoute();
...
} else if (props.query === 'cat') {
    const cat = route.params.value;
    filters.value = [new CategoriesFilter(cat)];
    ...
    const response = await api.recipes.allInCategory(cat);

Inside onBeforeRouteUpdate the navigation is not confirmed yet: calling next() only resolves this guard, route/currentRoute is updated after the whole navigation is finalized. setup() runs synchronously up to its first await, so route.params.value still holds the old value and the old category is fetched again. The /category/:value and /tags/:value routes reuse the same Search component instance (router/index.ts, routes search-category / search-tags), so the component is not re-mounted and onMounted does not help.

Suggested fix
Pass the target route into setup() and read the parameter from it instead of from useRoute():

const setup = async (r = route) => {
    ...
    const cat = r.params.value;   // same for tags / general search
    ...
};

onBeforeRouteUpdate((to, from, next) => {
    next();
    setup(to);
});

Alternatively watch(() => route.params.value, () => setup()) after navigation is confirmed (onBeforeRouteUpdateafterEach), or await router.isReady()-style deferral. The currently commented-out watch(route, …) block in the same file hints that this was already on the radar.

Reproduction

  1. Open Cookbook, click category A in the left navigation → list shows A (correct).
  2. Click category B in the navigation → list still shows the recipes of A, filter chip says A, URL says #/category/B.
  3. Click B again (or press F5) → now B is shown.

Expected behavior
The list shows the recipes of the category that was just clicked.

Actual behavior
The list shows the recipes of the previously selected category; it lags one navigation step behind.

Screenshots
n/a (behaviour is fully explained by the code above; verified that the API returns correct data for each category while the UI shows the previous one).

Browser
Reported from desktop Chromium-based and Firefox browsers; browser-independent (Vue Router timing).

Versions
Nextcloud server version: 33.0.8 (Hetzner Storage Share, managed)
Cookbook version: 0.11.10
Database system: managed by hoster (not exposed); not relevant, API responses are correct

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/components/SearchResults.vue, focusing on setup() and onBeforeRouteUpdate, then check the search-category and search-tags routes in router/index.ts. Reproduce category-to-category and tag-to-tag navigation, and verify that the selected route parameter drives both the filter chip and recipe list without lagging behind.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
86/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.