[BUG] - Meal Recipe dropdown menu doesn't work in meal planner after a previous mealplan day was added with "Note Only" enabled.

[paaff]

First Check

• [X] This is not a feature request.
• [X] I added a very descriptive title to this issue (title field is above this).
• [X] I used the GitHub search to find a similar issue and didn't find it.
• [x] I searched the Mealie documentation, with the integrated search.
• [X] I already read the docs and didn't find an answer.
• [X] This issue can be replicated on the demo site (https://demo.mealie.io/).

What is the issue you are experiencing?

When editing days in the mealplan there seems to a bug in which the Meal Recipe tab doesn't load any recipes.

This happens when I've first edited a day and used the option Note Only and then proceed to the next day, edit it, disable Note Only and attempt to use the Meal Recipe dropdown menu.

I recognize that the information is rather small, but the steps to reproduce or the explanation for the bug isn't that complicated. I reproduce this in the demo site as instructed also.

Anyways, thanks for the cool application. :)!

Steps to Reproduce

1) Go into Meal Planner and edit the first day. 2) Enable Note Only and write "Test" in the Meal Title. Click Create.

3) Go to and edit the next day. 4) Disable Note Only. Attempt to use the Meal Recipe dropdown menu.

Please provide relevant logs

Note - these logs are from my own instance and the screenshots above is from your demo environment :) They acted in the same way though, so that's why I reused the screenshots. I don't see a lot of logs rom my point of view, but here you go just in case :)

Mealie Version

Docker image: `ghcr.io/mealie-recipes/mealie:v1.12.0

Deployment

Docker (Linux)

Additional Deployment Details

No response

[alwinnocom]

I'll try working on this.

[alwinnocom]

I cannot continue working on the issue because my Dev Container and Docker keep crashing and I don’t want to hold back the project from correcting this issue any more days. I picked up this issue originally because my mealie setup was working, so I thought I could fix the problem on my end. However, my mealie setup keeps crashing now. I apologize for the inconvenience.

I have to pass off this issue to someone whose setup is working because something isn’t going right on my machine.

Bug Investigation: Here is what I was able to find out about the bug.

Tests: The bug also shows up even if you haven’t Created a new recipe, as long as the recipe you clicked on is set to Note Only and it is the 2nd time you have opened it to check the Dropdown.

1. Edit Title + Note Only is on, turn it off + see Dropdown shows up + click away
   • go back & No Data Available
2. Edit Title + Note Only is on, turn it off + click away
   • go back & No Data Available, even though this is the 1st time you clicked the Dropdown
3. click on pre-existing recipe + Note Only is off + go to Dropdown. Dropdown shows up.
   • go back and Dropdown data still shows up
4. click on pre-existing recipe + Note Only is off + go to Dropdown. Dropdown shows up + turn Note Only on
   • go back and Dropdown data still shows up

Edit.vue Dropdown issue:

frontend/pages/household/mealplan/planner/edit.vue

1. Dropdown items are loaded here. (loading property just checks if it is loading, see https://vuetifyjs.com/en/components/autocompletes/)

v-autocomplete :items="search.data.value"

2. useRecipeSearch loads the data.

   const search = useRecipeSearch(api);
   import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";

   • use-recipe-search
3. I believe the following code is causing the issue:

   onMounted(async () => {      
   await search.trigger();   
   });

frontend/composables/recipes/use-recipe-search.ts

4. useRecipeSearch

/**

• useRecipeSearch constructs a basic reactive search query
• that when query is changed, will search for recipes based
• on the query. Useful for searchable list views. For advanced
• search, use the useRecipeQuery composable. */

5. trigger()

async function trigger() {
  await searchRecipes(query.value)
}

My Hypothesis: The 1st time, the component is unmounted. The dropdown shows all the user’s recipes.

• The 2nd time, the component is mounted. The query is Nothing, so No Data Available. Possible Research: console.log(query) & Composition API: Lifecycle Hooks | Vue.js

I cannot test this hypothesis because my Dev Container and Docker keep disconnecting and crashing on me, so I cannot work on the bug any further. I apologize for the inconvenience.