alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 13:12:12 -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 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');

13
web/comfyui/autocomplete.js
View File

@@ -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;
}