From 5da26e917aaf0862b56bc2dd222fa6652b816290 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Tue, 24 Dec 2024 08:13:14 -0700
Subject: [PATCH] Fix render issue when removing search filter chips (#2038)

---
 browser_tests/nodeSearchBox.spec.ts        | 50 ++++++++++++++++++++--
 src/components/searchbox/NodeSearchBox.vue |  1 +
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/browser_tests/nodeSearchBox.spec.ts b/browser_tests/nodeSearchBox.spec.ts
index fecbe6d09..f02c588ee 100644
--- a/browser_tests/nodeSearchBox.spec.ts
+++ b/browser_tests/nodeSearchBox.spec.ts
@@ -107,26 +107,68 @@ test.describe('Node search box', () => {
   })
 
   test.describe('Filtering', () => {
+    const expectFilterChips = async (comfyPage, expectedTexts: string[]) => {
+      const chips = comfyPage.searchBox.filterChips
+
+      // Check that the number of chips matches the expected count
+      await expect(chips).toHaveCount(expectedTexts.length)
+
+      // Verify the text and visibility of each filter chip
+      await Promise.all(
+        expectedTexts.map(async (text, index) => {
+          const chip = chips.nth(index)
+          await expect(chip).toContainText(text)
+          await expect(chip).toBeVisible()
+        })
+      )
+    }
+
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.doubleClickCanvas()
     })
 
     test('Can add filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+      await expectFilterChips(comfyPage, ['MODEL'])
     })
 
     test('Can add multiple filters', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(2)
+      await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
     })
 
     test('Can remove filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
       await comfyPage.searchBox.removeFilter(0)
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+      await expectFilterChips(comfyPage, [])
+    })
+
+    test.describe('Removing from multiple filters', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+        await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+        await comfyPage.searchBox.addFilter('utils', 'Category')
+      })
+
+      test('Can remove first filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['CLIP', 'utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, [])
+      })
+
+      test('Can remove middle filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(1)
+        await expectFilterChips(comfyPage, ['MODEL', 'utils'])
+      })
+
+      test('Can remove last filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(2)
+        await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
+      })
     })
   })
 
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 8cd137ecd..b83f36dc6 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -54,6 +54,7 @@
       <!-- FilterAndValue -->
       <template v-slot:chip="{ value }">
         <SearchFilterChip
+          :key="`${value[0].id}-${value[1]}`"
           @remove="onRemoveFilter($event, value)"
           :text="value[1]"
           :badge="value[0].invokeSequence.toUpperCase()"