From bc3ae3c6c0aacb355f6cf96058ff32b48fbbd3c4 Mon Sep 17 00:00:00 2001
From: Zdenek Stursa <90236729+zdenek-stursa@users.noreply.github.com>
Date: Thu, 30 Apr 2026 17:16:27 +0200
Subject: [PATCH] fix: restore create-item button in recipe dropdowns
 (categories, tags, tools) (#7564)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Domain/Recipe/RecipeIngredientEditor.vue  | 14 +++++-
 .../Domain/Recipe/RecipeOrganizerSelector.vue | 47 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/app/components/Domain/Recipe/RecipeIngredientEditor.vue
index 169212c90..50ab0a63d 100644
--- a/frontend/app/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeIngredientEditor.vue
@@ -88,7 +88,7 @@
             </div>
           </template>
           <template #append-item>
-            <div class="px-2">
+            <div v-if="showCreateUnit" class="px-2">
               <BaseButton
                 block
                 size="small"
@@ -147,7 +147,7 @@
             </div>
           </template>
           <template #append-item>
-            <div class="px-2">
+            <div v-if="showCreateFood" class="px-2">
               <BaseButton
                 block
                 size="small"
@@ -344,6 +344,11 @@ const foodData = useFoodData();
 const foodAutocomplete = ref<HTMLInputElement>();
 const { search: foodSearch, filtered: filteredFoods } = useSearch(foodStore.store);
 
+const showCreateFood = computed(() =>
+  !!foodSearch.value
+  && !filteredFoods.value.some((f: any) => (f.name ?? "").toLowerCase() === foodSearch.value.toLowerCase()),
+);
+
 async function createAssignFood() {
   foodData.data.name = foodSearch.value;
   model.value.food = await foodStore.actions.createOne(foodData.data) || undefined;
@@ -376,6 +381,11 @@ const unitsData = useUnitData();
 const unitAutocomplete = ref<HTMLInputElement>();
 const { search: unitSearch, filtered: filteredUnits } = useSearch(unitStore.store);
 
+const showCreateUnit = computed(() =>
+  !!unitSearch.value
+  && !filteredUnits.value.some((u: any) => (u.name ?? "").toLowerCase() === unitSearch.value.toLowerCase()),
+);
+
 async function createAssignUnit() {
   unitsData.data.name = unitSearch.value;
   model.value.unit = await unitStore.actions.createOne(unitsData.data) || undefined;
diff --git a/frontend/app/components/Domain/Recipe/RecipeOrganizerSelector.vue b/frontend/app/components/Domain/Recipe/RecipeOrganizerSelector.vue
index 446351f92..4177a560d 100644
--- a/frontend/app/components/Domain/Recipe/RecipeOrganizerSelector.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeOrganizerSelector.vue
@@ -19,6 +19,7 @@
     class="pa-0 ma-0"
     @update:model-value="resetSearchInput"
     @click:append="dialog = true"
+    @keyup.enter="handleEnter"
   >
     <template #chip="{ item, index }">
       <v-chip
@@ -32,6 +33,26 @@
         @click:close="removeByIndex(index)"
       />
     </template>
+    <template
+      v-if="showAdd"
+      #no-data
+    >
+      <div class="caption text-center pb-2">
+        {{ $t("recipe.press-enter-to-create") }}
+      </div>
+    </template>
+    <template
+      v-if="showAdd && searchInput"
+      #append-item
+    >
+      <div class="px-2">
+        <BaseButton
+          block
+          size="small"
+          @click="createItem()"
+        />
+      </div>
+    </template>
     <template
       v-if="showAdd"
       #append
@@ -180,6 +201,32 @@ function appendCreated(item: any) {
   selected.value = [...selected.value, item];
 }
 
+function handleEnter() {
+  if (!searchInput.value) {
+    return;
+  }
+  const exactMatch = items.value.some(
+    (item: any) => (item.name ?? "").toLowerCase() === searchInput.value.toLowerCase(),
+  );
+  if (!exactMatch) {
+    createItem();
+  }
+}
+
+async function createItem() {
+  if (!searchInput.value) {
+    return;
+  }
+
+  const actions = storeMap[props.selectorType].actions;
+  // @ts-expect-error different organizer types have different required fields
+  const newItem = await actions.createOne({ name: searchInput.value });
+  if (newItem) {
+    appendCreated(newItem);
+  }
+  searchInput.value = "";
+}
+
 const dialog = ref(false);
 
 const searchInput = ref("");