Fix searchbox dismissed when closing filter panel (#2196)

Comfy-Org · Jan 8, 2025 · 73ecacf · 73ecacf
1 parent 67e6df7
commit 73ecacf
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
@@ -3,6 +3,13 @@ import { Locator, Page } from '@playwright/test'
 export class ComfyNodeSearchFilterSelectionPanel {
   constructor(public readonly page: Page) {}
 
+  get header() {
+    return this.page
+      .getByRole('dialog')
+      .locator('div')
+      .filter({ hasText: 'Add node filter condition' })
+  }
+
   async selectFilterType(filterType: string) {
     await this.page
       .locator(

diff --git a/browser_tests/nodeSearchBox.spec.ts b/browser_tests/nodeSearchBox.spec.ts
@@ -132,6 +132,22 @@ test.describe('Node search box', () => {
       await expectFilterChips(comfyPage, ['MODEL'])
     })
 
+    test('Outer click dismisses filter panel but keeps search box visible', async ({
+      comfyPage
+    }) => {
+      await comfyPage.searchBox.filterButton.click()
+      const panel = comfyPage.searchBox.filterSelectionPanel
+      await panel.header.waitFor({ state: 'visible' })
+      const panelBounds = await panel.header.boundingBox()
+      await comfyPage.page.mouse.click(panelBounds!.x - 10, panelBounds!.y - 10)
+
+      // Verify the filter selection panel is hidden
+      expect(panel.header).not.toBeVisible()
+
+      // Verify the node search dialog is still visible
+      expect(comfyPage.searchBox.input).toBeVisible()
+    })
+
     test('Can add multiple filters', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.addFilter('CLIP', 'Output Type')

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
@@ -19,7 +19,13 @@
       class="filter-button z-10"
       @click="nodeSearchFilterVisible = true"
     />
-    <Dialog v-model:visible="nodeSearchFilterVisible" class="min-w-96">
+    <Dialog
+      v-model:visible="nodeSearchFilterVisible"
+      class="min-w-96"
+      dismissable-mask
+      modal
+      @hide="reFocusInput"
+    >
       <template #header>
         <h3>Add node filter condition</h3>
       </template>
@@ -140,7 +146,6 @@ onMounted(reFocusInput)
 const onAddFilter = (filterAndValue: FilterAndValue) => {
   nodeSearchFilterVisible.value = false
   emit('addFilter', filterAndValue)
-  reFocusInput()
 }
 const onRemoveFilter = (event: Event, filterAndValue: FilterAndValue) => {
   event.stopPropagation()