Fix search input failing to focus after adding filter (#2023)

browser_tests/fixtures/ComfyPage.ts

@@ -907,5 +907,19 @@ const makeMatcher = function <T>(
 export const comfyExpect = expect.extend({
   toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
   toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
-  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed')
+  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
+  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
+    const isFocused = await locator.evaluate(
+      (el) => el === document.activeElement
+    )
+
+    await expect(async () => {
+      expect(isFocused).toBe(!this.isNot)
+    }).toPass(options)
+
+    return {
+      pass: isFocused,
+      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
+    }
+  }
 })

browser_tests/nodeSearchBox.spec.ts

@@ -1,5 +1,7 @@
-import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from './fixtures/ComfyPage'
 
 test.describe('Node search box', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -127,6 +129,23 @@ test.describe('Node search box', () => {
       await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
     })
   })
+
+  test.describe('Input focus behavior', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.doubleClickCanvas()
+    })
+
+    test('focuses input after adding a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expect(comfyPage.searchBox.input).toHaveFocus()
+    })
+
+    test('focuses input after removing a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.removeFilter(0)
+      await expect(comfyPage.searchBox.input).toHaveFocus()
+    })
+  })
 })
 
 test.describe('Release context menu', () => {

src/components/searchbox/NodeSearchBox.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import Dialog from 'primevue/dialog'
 import Button from 'primevue/button'
@@ -124,11 +124,12 @@ const search = (query: string) => {
 
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
 
+let inputElement: HTMLInputElement | null = null
 const reFocusInput = () => {
-  const inputElement = document.getElementById(inputId) as HTMLInputElement
+  inputElement ??= document.getElementById(inputId) as HTMLInputElement
   if (inputElement) {
     inputElement.blur()
-    inputElement.focus()
+    nextTick(() => inputElement?.focus())
   }
 }