fix(recipes): allow Enter to add import tags

This commit is contained in:
pixelpaws
2026-03-27 19:28:58 +08:00
parent a5191414cc
commit 20e50156a2
2 changed files with 75 additions and 0 deletions

View File

@@ -6,8 +6,27 @@ export class RecipeDataManager {
this.importManager = importManager;
}
setupTagInputEnterHandler() {
const tagInput = document.getElementById('tagInput');
if (!tagInput || tagInput.hasEnterAddTagHandler) {
return;
}
tagInput.addEventListener('keydown', (event) => {
if (event.key !== 'Enter') {
return;
}
event.preventDefault();
this.addTag();
});
tagInput.hasEnterAddTagHandler = true;
}
showRecipeDetailsStep() {
this.importManager.stepManager.showStep('detailsStep');
this.setupTagInputEnterHandler();
// Set default recipe name from prompt or image filename
const recipeName = document.getElementById('recipeName');

View File

@@ -0,0 +1,56 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
vi.mock('../../../static/js/utils/uiHelpers.js', () => ({
showToast: vi.fn(),
}));
vi.mock('../../../static/js/utils/i18nHelpers.js', () => ({
translate: (_key, _params, fallback) => fallback ?? '',
}));
describe('RecipeDataManager tag input Enter behavior', () => {
beforeEach(() => {
vi.resetModules();
document.body.innerHTML = `
<input id="tagInput" type="text" />
<div id="tagsContainer"></div>
`;
});
it('adds a tag when pressing Enter in tag input', async () => {
const { RecipeDataManager } = await import('../../../static/js/managers/import/RecipeDataManager.js');
const importManager = {
recipeTags: [],
stepManager: { showStep: vi.fn() },
};
const manager = new RecipeDataManager(importManager);
manager.setupTagInputEnterHandler();
const tagInput = document.getElementById('tagInput');
tagInput.value = 'portrait';
tagInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
expect(importManager.recipeTags).toEqual(['portrait']);
expect(tagInput.value).toBe('');
expect(document.getElementById('tagsContainer').textContent).toContain('portrait');
});
it('does not register duplicate Enter handlers when setup runs multiple times', async () => {
const { RecipeDataManager } = await import('../../../static/js/managers/import/RecipeDataManager.js');
const importManager = {
recipeTags: [],
stepManager: { showStep: vi.fn() },
};
const manager = new RecipeDataManager(importManager);
manager.setupTagInputEnterHandler();
manager.setupTagInputEnterHandler();
const tagInput = document.getElementById('tagInput');
tagInput.value = 'anime';
tagInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
expect(importManager.recipeTags).toEqual(['anime']);
});
});