From 5cd7204101fc28d24f804c57585c02c1a77e6c32 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Fri, 22 May 2026 21:50:26 +0800
Subject: [PATCH] fix(autocomplete): prevent blur-on-click race condition
 causing dropped selection (#939)

Add mousedown(e.preventDefault()) on dropdown items to prevent the textarea blur event from firing before click. Without this, the blur handler's formatAutocompleteTextOnBlur() modifies text with unmatched commas (e.g. "<lora:X:1>,search") and triggers hide() via suppressAutocompleteOnce, removing the item from the DOM before the click handler can execute.

Fixes #939
---
 web/comfyui/autocomplete.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web/comfyui/autocomplete.js b/web/comfyui/autocomplete.js
index 8be8e1b3..047d03c4 100644
--- a/web/comfyui/autocomplete.js
+++ b/web/comfyui/autocomplete.js
@@ -1461,6 +1461,11 @@ class AutoComplete {
                 box-sizing: border-box;
             `;
 
+            // Prevent textarea from losing focus - same fix as createItemElement
+            itemEl.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+            });
+
             itemEl.addEventListener('mouseenter', () => {
                 this.selectItem(index, { manual: true });
             });
@@ -2189,6 +2194,16 @@ class AutoComplete {
             item.appendChild(nameSpan);
         }
 
+        // Prevent textarea from losing focus when clicking dropdown items.
+        // Without this, the blur event fires before click, and the blur handler's
+        // formatAutocompleteTextOnBlur() modifies the text and triggers hide()
+        // via suppressAutocompleteOnce, removing this item from the DOM before
+        // the click handler can execute. This specifically breaks the case where
+        // the text has a comma not followed by a space (e.g. "<lora:X:1>,search").
+        item.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+        });
+
         // Hover and selection handlers
         item.addEventListener('mouseenter', () => {
             this.selectItem(index, { manual: true });