alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix(autocomplete): fix dropdown width calculation bug

Browse Source 
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).
This commit is contained in:
Will Miao
2026-03-07 23:23:26 +08:00
parent 4fb07370dd
commit 2fbe6c8843
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/frontend/components/autocomplete.behavior.test.js
View File

@@ -90,7 +90,7 @@ describe('AutoComplete widget interactions', () => {
await vi.runAllTimersAsync(); await vi.runAllTimersAsync();
await Promise.resolve(); 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'); const items = autoComplete.dropdown.querySelectorAll('.comfy-autocomplete-item');
expect(items).toHaveLength(1); expect(items).toHaveLength(1);
expect(autoComplete.dropdown.style.display).toBe('block'); expect(autoComplete.dropdown.style.display).toBe('block');

7
web/comfyui/autocomplete.js
View File

@@ -1600,6 +1600,12 @@ class AutoComplete {
this.dropdown.style.display = 'block'; this.dropdown.style.display = 'block';
this.dropdown.style.visibility = 'hidden'; 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 // Measure the content width
let maxWidth = 200; // minimum width let maxWidth = 200; // minimum width
// For virtual scrolling, query items from contentContainer; otherwise from dropdown // For virtual scrolling, query items from contentContainer; otherwise from dropdown
@@ -1614,6 +1620,7 @@ class AutoComplete {
// Set the width and restore visibility // Set the width and restore visibility
this.dropdown.style.width = Math.min(maxWidth, 400) + 'px'; // Cap at 400px this.dropdown.style.width = Math.min(maxWidth, 400) + 'px'; // Cap at 400px
this.dropdown.style.minWidth = '';
this.dropdown.style.visibility = 'visible'; this.dropdown.style.visibility = 'visible';
this.dropdown.style.display = originalDisplay; this.dropdown.style.display = originalDisplay;
} }