feat(loras): add backspace key handling for LoRA deletion with input focus check, fixes #601

Add keyboard navigation support for deleting selected LoRA entries using Backspace key while preventing accidental deletion when editing strength input values. The implementation includes:

- Backspace key now deletes selected LoRA when pressed outside strength inputs
- Backspace is ignored when focused on strength input fields to allow normal text editing
- Added corresponding test cases to verify both deletion and non-deletion scenarios

This prevents users from accidentally deleting LoRA entries while editing strength values and provides intuitive keyboard controls for LoRA management.
This commit is contained in:
Will Miao
2025-10-27 19:39:49 +08:00
parent 5326fa2970
commit 98678a8698
2 changed files with 64 additions and 1 deletions

View File

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