From ec11d7825d2b7b96b0a54c3b27c14eedbb09877a Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Thu, 23 Oct 2025 22:53:58 -0700
Subject: [PATCH] Show default node list after clearing search input (#6231)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![searchbox-clear](https://github.com/user-attachments/assets/94737766-bf96-4f03-86a0-70057b3b0e81)
Resolves #4887

<details>
<summary>The dirty details</summary>
There's really not a cleaner workaround here. Prime vue is hardcoded to
hide results when a query is received with length 0. With our search
box, we never want completions not to be shown and the sanest, if not
the only viable solution, is to simply block the hiding completely.

Future TODO:
- Completely remove the reFocusInput jank. If we can make the search box
a frame more responsive, we should.

```ts
onInput(event) {
    if (this.typeahead) {
        if (this.searchTimeout) {
            clearTimeout(this.searchTimeout);
        }

        let query = event.target.value;

        if (!this.multiple) {
            this.updateModel(event, query);
        }

        if (query.length === 0) {
            this.hide();
            this.$emit('clear');
        } else {
            if (query.length >= this.minLength) {
                this.focusedOptionIndex = -1;

                this.searchTimeout = setTimeout(() => {
                    this.search(event, query, 'input');
                }, this.delay);
            } else {
                this.hide();
            }
        }
    }
}
hide(isFocus) {
    const _hide = () => {
        this.$emit('before-hide');
        this.dirty = isFocus;
        this.overlayVisible = false;
        this.clicked = false;
        this.focusedOptionIndex = -1;

        isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput?.$el);
    };

    setTimeout(() => {
        _hide();
    }, 0); // For ScreenReaders
}
```
</details>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6231-Show-default-node-list-after-clearing-search-input-2956d73d36508134960df537c7409646)
by [Unito](https://www.unito.io)
---
 src/components/searchbox/NodeSearchBox.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 56e6a43d4e..f1e9dced8c 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -35,6 +35,7 @@
     </Dialog>
 
     <AutoCompletePlus
+      ref="autoCompletePlus"
       :model-value="filters"
       class="comfy-vue-node-search-box z-10 grow"
       scroll-height="40vh"
@@ -42,7 +43,6 @@
       :input-id="inputId"
       append-to="self"
       :suggestions="suggestions"
-      :min-length="0"
       :delay="100"
       :loading="!nodeFrequencyStore.isLoaded"
       complete-on-focus
@@ -106,6 +106,7 @@ const { filters, searchLimit = 64 } = defineProps<{
   searchLimit?: number
 }>()
 
+const autoCompletePlus = ref()
 const nodeSearchFilterVisible = ref(false)
 const inputId = `comfy-vue-node-search-box-input-${Math.random()}`
 const suggestions = ref<ComfyNodeDefImpl[]>([])
@@ -140,7 +141,13 @@ const reFocusInput = async () => {
   }
 }
 
-onMounted(reFocusInput)
+onMounted(() => {
+  inputElement ??= document.getElementById(inputId) as HTMLInputElement
+  if (inputElement) inputElement.focus()
+  autoCompletePlus.value.hide = () => search('')
+  search('')
+  autoCompletePlus.value.show()
+})
 const onAddFilter = (
   filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
 ) => {