From 2d5558291684c29225fc22a1bd235b237f00110a Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sat, 31 Jan 2026 20:20:47 -0800
Subject: [PATCH] fix: replace transition-all with explicit properties to
 prevent layout recalculation loop

Amp-Thread-ID: https://ampcode.com/threads/T-019c176b-ea24-74be-8443-446ec9522c03
---
 .../form/dropdown/FormDropdownMenu.vue        | 73 +++++++++----------
 .../form/dropdown/FormDropdownMenuItem.vue    | 10 +--
 2 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index 70657fbc32..2ab7fa6408 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -98,44 +98,41 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
       :searcher
       :update-key="updateKey"
     />
-    <!-- List Container -->
-    <div class="relative mt-2 min-h-0 flex-1">
-      <!-- Empty State -->
-      <div
-        v-if="items.length === 0"
-        class="flex h-50 items-center justify-center"
-      >
-        <i
-          :title="$t('g.noItems')"
-          :aria-label="$t('g.noItems')"
-          class="icon-[lucide--circle-off] size-30 text-muted-foreground/20"
-        />
-      </div>
-      <!-- Virtualized Grid -->
-      <VirtualGrid
-        v-else
-        :key="layoutMode"
-        :items="virtualItems"
-        :grid-style="gridStyle"
-        :max-columns="layoutConfig.maxColumns"
-        :default-item-height="layoutConfig.itemHeight"
-        :default-item-width="layoutConfig.itemWidth"
-        :buffer-rows="2"
-        class="h-full"
-      >
-        <template #item="{ item, index }">
-          <FormDropdownMenuItem
-            :index="index"
-            :selected="isSelected(item, index)"
-            :media-src="item.mediaSrc"
-            :name="item.name"
-            :label="item.label"
-            :metadata="item.metadata"
-            :layout="layoutMode"
-            @click="emit('item-click', item, index)"
-          />
-        </template>
-      </VirtualGrid>
+    <!-- Empty State -->
+    <div
+      v-if="items.length === 0"
+      class="flex h-50 items-center justify-center"
+    >
+      <i
+        :title="$t('g.noItems')"
+        :aria-label="$t('g.noItems')"
+        class="icon-[lucide--circle-off] size-30 text-muted-foreground/20"
+      />
     </div>
+    <!-- Virtualized Grid -->
+    <VirtualGrid
+      v-else
+      :key="layoutMode"
+      :items="virtualItems"
+      :grid-style="gridStyle"
+      :max-columns="layoutConfig.maxColumns"
+      :default-item-height="layoutConfig.itemHeight"
+      :default-item-width="layoutConfig.itemWidth"
+      :buffer-rows="2"
+      class="mt-2 min-h-0 flex-1"
+    >
+      <template #item="{ item, index }">
+        <FormDropdownMenuItem
+          :index="index"
+          :selected="isSelected(item, index)"
+          :media-src="item.mediaSrc"
+          :name="item.name"
+          :label="item.label"
+          :metadata="item.metadata"
+          :layout="layoutMode"
+          @click="emit('item-click', item, index)"
+        />
+      </template>
+    </VirtualGrid>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
index 0ba2161f9e..493bd2c8ed 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue'
 
-import LazyImage from '@/components/common/LazyImage.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { AssetKindKey } from './types'
@@ -58,7 +57,7 @@ function handleVideoLoad(event: Event) {
     :class="
       cn(
         'flex gap-1 select-none group/item cursor-pointer bg-component-node-widget-background',
-        'transition-all duration-150',
+        'transition-[transform,box-shadow,background-color] duration-150',
         {
           'flex-col text-center': layout === 'grid',
           'flex-row text-left max-h-16 rounded-lg hover:scale-102 active:scale-98':
@@ -80,7 +79,7 @@ function handleVideoLoad(event: Event) {
         cn(
           'relative',
           'w-full aspect-square overflow-hidden outline-1 outline-offset-[-1px] outline-interface-stroke',
-          'transition-all duration-150',
+          'transition-[transform,box-shadow] duration-150',
           {
             'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
             'rounded-sm group-hover/item:scale-108 group-active/item:scale-95':
@@ -109,11 +108,12 @@ function handleVideoLoad(event: Event) {
         muted
         @loadeddata="handleVideoLoad"
       />
-      <LazyImage
+      <img
         v-else-if="mediaSrc"
         :src="mediaSrc"
         :alt="name"
-        image-class="size-full object-cover"
+        draggable="false"
+        class="size-full object-cover"
         @load="handleImageLoad"
       />
       <div