From d6b8f03c5b4543969d83397c713799a6590b5fe5 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 16 Jun 2025 19:41:28 +0000
Subject: [PATCH] fix drag and drop on recipe instructions

---
 .../RecipePageParts/RecipePageInstructions.vue    | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 07632fdd1..4cd7eadde 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -130,11 +130,10 @@
         ghostClass: 'ghost',
       }"
       @start="drag = true"
-      @end="drag = false"
+      @end="onDragEnd"
     >
       <TransitionGroup
         type="transition"
-        :name="!drag ? 'flip-list' : ''"
       >
         <div
           v-for="(step, index) in instructionList"
@@ -512,13 +511,10 @@ export default defineNuxtComponent({
       { deep: true },
     );
 
-    watch(
-      instructionList,
-      (newVal) => {
-        context.emit("update:modelValue", [...newVal]);
-      },
-      { deep: true },
-    );
+    function onDragEnd() {
+      context.emit("update:modelValue", [...instructionList.value]);
+      drag.value = false;
+    }
 
     // ===============================================================
     // Ingredient Linker
@@ -784,6 +780,7 @@ export default defineNuxtComponent({
       loadingStates,
 
       // Rest
+      onDragEnd,
       drag,
       togglePreviewState,
       toggleCollapseSection,