From 2fbe6c8843dd91cdf8565e51fb2439f1ef093bfc Mon Sep 17 00:00:00 2001 From: Will Miao Date: Sat, 7 Mar 2026 23:23:26 +0800 Subject: [PATCH] fix(autocomplete): fix dropdown width calculation bug Temporarily remove width constraints when measuring content to prevent scrollWidth from being limited by narrow container. This fixes the issue where dropdown width was incorrectly calculated as ~120px. Also update test to match maxItems default value (100). --- .../components/autocomplete.behavior.test.js | 2 +- web/comfyui/autocomplete.js | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/tests/frontend/components/autocomplete.behavior.test.js b/tests/frontend/components/autocomplete.behavior.test.js index 1453d43d..a64227fb 100644 --- a/tests/frontend/components/autocomplete.behavior.test.js +++ b/tests/frontend/components/autocomplete.behavior.test.js @@ -90,7 +90,7 @@ describe('AutoComplete widget interactions', () => { await vi.runAllTimersAsync(); await Promise.resolve(); - expect(fetchApiMock).toHaveBeenCalledWith('/lm/loras/relative-paths?search=example&limit=20'); + expect(fetchApiMock).toHaveBeenCalledWith('/lm/loras/relative-paths?search=example&limit=100'); const items = autoComplete.dropdown.querySelectorAll('.comfy-autocomplete-item'); expect(items).toHaveLength(1); expect(autoComplete.dropdown.style.display).toBe('block'); diff --git a/web/comfyui/autocomplete.js b/web/comfyui/autocomplete.js index a39d917d..c1e4c565 100644 --- a/web/comfyui/autocomplete.js +++ b/web/comfyui/autocomplete.js @@ -1593,13 +1593,19 @@ class AutoComplete { this.dropdown.style.left = (position.left ?? 0) + "px"; this.dropdown.style.top = (position.top ?? 0) + "px"; this.dropdown.style.maxHeight = (window.innerHeight - position.top) + "px"; - + // Adjust width to fit content // Temporarily show the dropdown to measure content width const originalDisplay = this.dropdown.style.display; this.dropdown.style.display = 'block'; this.dropdown.style.visibility = 'hidden'; - + + // Temporarily remove width constraints to allow content to expand naturally + // This prevents items.scrollWidth from being limited by a narrow container + const originalWidth = this.dropdown.style.width; + this.dropdown.style.width = 'auto'; + this.dropdown.style.minWidth = '200px'; + // Measure the content width let maxWidth = 200; // minimum width // For virtual scrolling, query items from contentContainer; otherwise from dropdown @@ -1611,9 +1617,10 @@ class AutoComplete { const itemWidth = item.scrollWidth + 24; // Add padding maxWidth = Math.max(maxWidth, itemWidth); }); - + // Set the width and restore visibility this.dropdown.style.width = Math.min(maxWidth, 400) + 'px'; // Cap at 400px + this.dropdown.style.minWidth = ''; this.dropdown.style.visibility = 'visible'; this.dropdown.style.display = originalDisplay; }