diff --git a/src/core/formDefinition.ts b/src/core/formDefinition.ts index f7654357..3aa733b9 100644 --- a/src/core/formDefinition.ts +++ b/src/core/formDefinition.ts @@ -170,7 +170,10 @@ export function validateFields(fields: unknown) { } console.error('Fields issues', result.issues) return result.issues.map(issue => - ({ message: issue.message, path: issue.path?.map(item => item.key).join('.') }) + ({ + message: issue.message, path: issue.path?.map(item => item.key).join('.'), + index: issue.path?.[0]?.key ?? 0 + }) ); } diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte index 0c6f1fda..cff98fe6 100644 --- a/src/views/FormBuilder.svelte +++ b/src/views/FormBuilder.svelte @@ -18,7 +18,6 @@ name: "", fields: [], }; - export let app: App; export let onChange: () => void; export let onSubmit: (formDefinition: FormDefinition) => void; export let onCancel: () => void; @@ -28,13 +27,18 @@ $: errors = validateFields(definition.fields); $: activeFieldIndex = 0; - function scrollWhenActive(element: HTMLElement, index: number) { - function update() { - if (index === activeFieldIndex) { - element.scrollIntoView({ behavior: "smooth", block: "center" }); + function scrollWhenActive(element: HTMLElement, isActive: boolean) { + function update(isActive: boolean) { + if (isActive) { + setTimeout(() => { + element.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + }, 100); } } - update(); + update(isActive); return { update, }; @@ -83,6 +87,7 @@ ...definition.fields.slice(fieldIndex + 1), ]; onChange(); + activeFieldIndex = fieldIndex + 1; } function moveField(from: number, direction: "up" | "down") { @@ -95,6 +100,7 @@ definition.fields[to] = tmp; definition.fields = definition.fields; onChange(); + activeFieldIndex = to; } const handleSubmit = () => { @@ -173,6 +179,12 @@ {#if error.path} at {error.path} {/if} + {/each} @@ -187,7 +199,7 @@ {@const delete_id = `delete_${index}`}