mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-06 23:50:16 +02:00
feat: answer field UX improvements
- Auto-add one empty answer field when opening a blank question form - Auto-append new empty field when typing in the last answer field - Strip empty answer rows before submit (novalidate + JS cleanup) - Tab key skips correct/delete buttons, jumping straight to next answer
This commit is contained in:
@@ -8,6 +8,29 @@ export default class extends Controller {
|
||||
this.index = this.collectionTarget.children.length;
|
||||
this._setupDrag();
|
||||
this._syncOrdering();
|
||||
|
||||
if (this.index === 0) {
|
||||
this.addItem();
|
||||
}
|
||||
|
||||
this.collectionTarget.addEventListener('input', (e) => {
|
||||
if (e.target.type !== 'text') return;
|
||||
const item = e.target.closest('[data-collection-item]');
|
||||
const last = [...this.collectionTarget.children].at(-1);
|
||||
if (item && item === last && e.target.value.trim() !== '') {
|
||||
this.addItem();
|
||||
}
|
||||
});
|
||||
|
||||
const form = this.element.closest('form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', () => {
|
||||
[...this.collectionTarget.children].forEach(item => {
|
||||
const input = item.querySelector('input[type="text"]');
|
||||
if (input && input.value.trim() === '') item.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
addItem() {
|
||||
|
||||
Reference in New Issue
Block a user