diff --git a/tests/frontend/components/lorasWidgetEvents.interactions.test.js b/tests/frontend/components/lorasWidgetEvents.interactions.test.js index 099f60c8..3a34faee 100644 --- a/tests/frontend/components/lorasWidgetEvents.interactions.test.js +++ b/tests/frontend/components/lorasWidgetEvents.interactions.test.js @@ -105,4 +105,62 @@ describe('LoRA widget drag interactions', () => { document.dispatchEvent(new MouseEvent('mouseup')); expect(document.body.classList.contains('lm-lora-strength-dragging')).toBe(false); }); + + it('deletes the selected LoRA when backspace is pressed outside of strength inputs', async () => { + const { handleKeyboardNavigation } = await import(EVENTS_MODULE); + const widget = { + value: [{ name: 'Test', strength: 0.5, clipStrength: 0.5 }], + callback: vi.fn(), + }; + const preventDefault = vi.fn(); + const renderSpy = vi.fn(); + const selectLora = vi.fn(); + const event = { + key: 'Backspace', + preventDefault, + ctrlKey: false, + metaKey: false, + target: document.createElement('div'), + }; + + const handled = handleKeyboardNavigation(event, 'Test', widget, renderSpy, selectLora); + + expect(handled).toBe(true); + expect(preventDefault).toHaveBeenCalled(); + expect(widget.value).toEqual([]); + expect(widget.callback).toHaveBeenCalledWith([]); + expect(renderSpy).toHaveBeenCalledWith([], widget); + expect(selectLora).toHaveBeenCalledWith(null); + }); + + it('keeps the LoRA entry when editing strength input and pressing backspace', async () => { + const { handleKeyboardNavigation } = await import(EVENTS_MODULE); + const strengthInput = document.createElement('input'); + strengthInput.classList.add('lm-lora-strength-input'); + + const widget = { + value: [{ name: 'Test', strength: 0.5, clipStrength: 0.5 }], + callback: vi.fn(), + }; + const preventDefault = vi.fn(); + const renderSpy = vi.fn(); + const selectLora = vi.fn(); + + const event = { + key: 'Backspace', + preventDefault, + ctrlKey: false, + metaKey: false, + target: strengthInput, + }; + + const handled = handleKeyboardNavigation(event, 'Test', widget, renderSpy, selectLora); + + expect(handled).toBe(false); + expect(preventDefault).not.toHaveBeenCalled(); + expect(widget.value).toHaveLength(1); + expect(widget.callback).not.toHaveBeenCalled(); + expect(renderSpy).not.toHaveBeenCalled(); + expect(selectLora).not.toHaveBeenCalled(); + }); }); diff --git a/web/comfyui/loras_widget_events.js b/web/comfyui/loras_widget_events.js index 06d4675b..4c074a26 100644 --- a/web/comfyui/loras_widget_events.js +++ b/web/comfyui/loras_widget_events.js @@ -354,9 +354,11 @@ export function initReorderDrag(dragHandle, loraName, widget, renderFunction) { // Function to handle keyboard navigation export function handleKeyboardNavigation(event, selectedLora, widget, renderFunction, selectLora) { if (!selectedLora) return false; - + const lorasData = parseLoraValue(widget.value); let handled = false; + const isStrengthInputFocused = + event?.target?.classList?.contains('lm-lora-strength-input') ?? false; // Check for Ctrl/Cmd modifier for reordering if (event.ctrlKey || event.metaKey) { @@ -420,6 +422,9 @@ export function handleKeyboardNavigation(event, selectedLora, widget, renderFunc case 'Delete': case 'Backspace': + if (isStrengthInputFocused) { + break; + } event.preventDefault(); const filtered = lorasData.filter(l => l.name !== selectedLora); widget.value = formatLoraValue(filtered);