From 34b7fe14c4b81fc57979a0c58827bf40fd312a00 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Aug 2025 21:42:10 -0400
Subject: [PATCH] Fix mode switch

---
 browser_tests/tests/commandSearchBox.spec.ts |  9 +++------
 src/components/searchbox/NodeSearchBox.vue   | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/browser_tests/tests/commandSearchBox.spec.ts b/browser_tests/tests/commandSearchBox.spec.ts
index 490f94371..d5c9bd39d 100644
--- a/browser_tests/tests/commandSearchBox.spec.ts
+++ b/browser_tests/tests/commandSearchBox.spec.ts
@@ -118,18 +118,15 @@ test.describe('Command search box', () => {
     expect(nodesAfter).toBe(0)
   })
 
-  test.skip('Returns to node search when removing ">"', async ({
-    comfyPage
-  }) => {
+  test('Returns to node search when removing ">"', async ({ comfyPage }) => {
     await comfyPage.doubleClickCanvas()
 
     // Enter command mode
     await comfyPage.searchBox.input.fill('>')
     await expect(comfyPage.page.locator('.filter-button')).not.toBeVisible()
 
-    // Return to node search by clearing input and triggering search
-    await comfyPage.searchBox.input.clear()
-    await comfyPage.searchBox.input.press('Backspace') // Trigger search event
+    // Return to node search by filling with empty string to trigger search
+    await comfyPage.searchBox.input.fill('')
 
     // Small wait for UI update
     await comfyPage.page.waitForTimeout(200)
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 85f116a75..eb741833f 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -54,6 +54,7 @@
       @complete="search($event.query)"
       @option-select="onOptionSelect($event.value)"
       @focused-option-changed="setHoverSuggestion($event)"
+      @input="handleInput"
     >
       <template #option="{ option }">
         <CommandSearchItem
@@ -241,4 +242,19 @@ const getOptionLabel = (
   }
   return option.label || option.id
 }
+
+/**
+ * Handles direct input changes on the AutoCompletePlus component.
+ * This ensures search mode switching works properly when users clear the input
+ * or modify it directly, as the @complete event may not always trigger.
+ *
+ * @param event - The input event from the AutoCompletePlus component
+ */
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const inputValue = target.value
+
+  // Trigger search to handle mode switching between node and command search
+  search(inputValue)
+}
 </script>