diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-darwin.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-darwin.png new file mode 100644 index 000000000..83a01c11a Binary files /dev/null and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-darwin.png differ diff --git a/browser_tests/tests/nodeSearchBoxClearIssue.spec.ts b/browser_tests/tests/nodeSearchBoxClearIssue.spec.ts new file mode 100644 index 000000000..2a29e92eb --- /dev/null +++ b/browser_tests/tests/nodeSearchBoxClearIssue.spec.ts @@ -0,0 +1,50 @@ +import { + comfyExpect as expect, + comfyPageFixture as test +} from '../fixtures/ComfyPage' + +test.describe('Node search box - Issue #4887', () => { + test.beforeEach(async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.LinkRelease.Action', 'search box') + await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'search box') + await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default') + }) + + test('Shows default nodes after clearing search input', async ({ + comfyPage + }) => { + // 1. Open the searchbox + await comfyPage.doubleClickCanvas() + await expect(comfyPage.searchBox.input).toHaveCount(1) + + // 2. Focus the input to trigger dropdown with default nodes + await comfyPage.searchBox.input.focus() + await comfyPage.page.waitForTimeout(200) // Wait for focus to trigger dropdown + await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' }) + const initialOptions = await comfyPage.searchBox.dropdown + .locator('li') + .count() + expect(initialOptions).toBeGreaterThan(0) + + // 3. Type some text in the search input + await comfyPage.searchBox.input.fill('image') + await comfyPage.page.waitForTimeout(200) // Wait for debounced search + + // 4. Verify search results are shown + const searchOptions = await comfyPage.searchBox.dropdown + .locator('li') + .count() + expect(searchOptions).toBeGreaterThan(0) + + // 5. Clear all the text using backspace to return to empty input + await comfyPage.searchBox.input.fill('') + await comfyPage.page.waitForTimeout(200) // Wait for debounced search + + // 6. Verify that default nodes are displayed (same as initial state) + const clearedOptions = await comfyPage.searchBox.dropdown + .locator('li') + .count() + expect(clearedOptions).toBe(initialOptions) + expect(clearedOptions).toBeGreaterThan(0) + }) +}) diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue index eb741833f..43a77bf0b 100644 --- a/src/components/searchbox/NodeSearchBox.vue +++ b/src/components/searchbox/NodeSearchBox.vue @@ -249,12 +249,16 @@ const getOptionLabel = ( * or modify it directly, as the @complete event may not always trigger. * * @param event - The input event from the AutoCompletePlus component + * @note Known issue on empty input complete state: + * https://github.com/Comfy-Org/ComfyUI_frontend/issues/4887 */ 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) + if (inputValue === '') { + search('') + } }