fix: Improve recipe ingredient selection (#6518)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -173,9 +173,11 @@
           :items="search.data.value || []"
           item-title="name"
           class="mx-1 py-0"
-          placeholder="Choose Recipe"
+          :placeholder="$t('search.type-to-search')"
           clearable
-          label="Recipe"
+          :label="!model.referencedRecipe ? $t('recipe.choose-recipe') : ''"
+          @click="search.trigger()"
+          @focus="search.trigger()"
         >
           <template #prepend />
         </v-autocomplete>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -75,7 +75,7 @@
         style="display: none"
         @bulk-data="addIngredient"
       />
-      <div class="d-inline-flex split-button">
+      <div class="d-inline-flex">
         <!-- Main button: Add Food -->
         <v-btn
           color="success"
@@ -263,11 +263,6 @@ function insertNewIngredient(dest: number) {
 </script>
 
 <style scoped>
-.split-button {
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-}
 .split-main {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;

frontend/lang/messages/en-US.json

@@ -565,6 +565,7 @@
     "choose-unit": "Choose Unit",
     "press-enter-to-create": "Press Enter to Create",
     "choose-food": "Choose Food",
+    "choose-recipe": "Choose Recipe",
     "notes": "Notes",
     "toggle-section": "Toggle Section",
     "see-original-text": "See Original Text",
@@ -734,7 +735,8 @@
     "search-hint": "Press '/'",
     "advanced": "Advanced",
     "auto-search": "Auto Search",
-    "no-results": "No results found"
+    "no-results": "No results found",
+    "type-to-search": "Type to search..."
   },
   "settings": {
     "add-a-new-theme": "Add a New Theme",