From ce3ece5da6fc42b295eee06d7295891ce20622ba Mon Sep 17 00:00:00 2001
From: Danielo Rodriguez <rdanielo@gmail.com>
Date: Fri, 20 Oct 2023 23:37:28 +0200
Subject: [PATCH] feat: scroll to new fields in the editor

---
 src/views/FormBuilder.svelte | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte
index 480f91e2..d9d8665b 100644
--- a/src/views/FormBuilder.svelte
+++ b/src/views/FormBuilder.svelte
@@ -26,6 +26,7 @@
 
     $: isValid = isValidFormDefinition(definition);
     $: errors = validateFields(definition.fields);
+    $: activeFieldIndex = 0;
 
     function folderField(element: HTMLElement, index: number) {
         const field = definition.fields[index];
@@ -45,6 +46,18 @@
         });
     }
 
+    function scrollWhenActive(element: HTMLElement, index: number) {
+        function update() {
+            if (index === activeFieldIndex) {
+                element.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+        }
+        update();
+        return {
+            update,
+        };
+    }
+
     function findFreeName(fieldIndex: number): string {
         const field = definition.fields[fieldIndex];
         let name = field.name;
@@ -130,7 +143,8 @@
                                 input: { type: "text" },
                             },
                         ];
-                        onChange();
+                        // onChange();
+                        activeFieldIndex = definition.fields.length - 1;
                     }}>Add more fields</button
                 >
                 <button
@@ -169,7 +183,10 @@
                 {#each definition.fields as field, index}
                     {@const desc_id = `desc_${index}`}
                     {@const delete_id = `delete_${index}`}
-                    <div class="flex column md-row gap2">
+                    <div
+                        class="flex column md-row gap2"
+                        use:scrollWhenActive={index}
+                    >
                         <div class="flex column gap1">
                             <label for={`name_${index}`}>Name</label>
                             <input